Изменить курсор дочернего элемента - PullRequest
Новая
       1

Изменить курсор дочернего элемента

0 голосов
/ 29 мая 2019

Я использую @material-ui/core: "4.0.1"

Использование компонента TextField и попытка изменить курсор на 'not-allowed'.

Простой код как показано ниже 

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

Но поскольку TextField сам имеет внутри другой компонент, отключенный значок курсора появляется только в верхней части пользовательского интерфейса (не поверх фактической текстовой области), как показано ниже

enter image description here

Может видеть два элемента div и один элемент управления вводом в TextField

enter image description here

Пытался использовать гламур, чтобы переписать класс, как показано ниже, но не повезло 

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>
  );
}

Есть ли в любом случае, я могу добиться этого

1 Ответ

3 голосов
/ 29 мая 2019

Попробуйте добавить стиль в inputProps prop: 

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