CODEWITHSUNDEEP
reactjsmaterial-ui
huMpty duMpty
huMpty duMpty

Reputation: 14460

Change child element cursor

I am using @material-ui/core: "4.0.1"

Using a TextField component and trying to change the cursor to 'not-allowed'.

Simple code as below 

<TextField style={{cursor:'not-allowed'}}
        id="standard-name"
        label="Name"
        margin="normal"
        disabled={true}
      />

But since the TextField it self have other component inside, disabled cursor icon only appear in top part of the ui (not on top of actual text area) as below

enter image description here

Can see two divs and one input control under TextField

enter image description here

Tried using glamor to overwrite the class as below but no luck

const styles = glamor.css({
  cursor:'not-allowed'
})

function MyStyledDiv({ ...rest}) {
  return (
    <div
      className={`${styles} ${'MuiInputBase-input'}`}
      {...rest}
    />
  )
}

function App() {
  return (
    <div className="App">
      <p>Testing</p>
      <MyStyledDiv>
      <TextField style={{cursor:'not-allowed'}}
        id="standard-name"
        label="Name"
        margin="normal"
        disabled={true}
      />
      </MyStyledDiv>
    </div>
  );
}

Is there anyway I can achieve this

Upvotes: 0

Views: 798

Answers (1)

Oscar
Oscar

Reputation: 1238

Try adding the styling to the inputProps prop:

<TextField
   id="standard-name"
   label="Name"
   margin="normal"
   disabled={true}
   inputProps={{style: {cursor:'not-allowed'}}}
/>

Upvotes: 3

Related Questions