更改子元素光标

Question

我正在使用@material-ui/core: "4.0.1"

使用TextField组件并尝试将光标更改为'not-allowed'。

简单的代码如下

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

但是由于TextField本身具有其他组件，因此禁用的光标图标仅显示在ui的顶部（而不是实际文本区域的顶部），如下所示

在TextField下可以看到两个div和一个输入控件

试图用魅力覆盖下面的类，但没有运气

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

反正我可以实现这一目标

Answer 1

尝试将样式添加到inputProps道具中：

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