如何修改禁用状态下MUI TextField的文本颜色？

解决方案 #

针对你使用的filled变体TextField，通过sx属性用更高特异性的选择器覆盖禁用状态的文本颜色即可，代码示例：

<TextField
  id="outlined-basic"
  value={'https://git.responsive.software/my-app.git'}
  fullWidth
  size="small"
  disabled
  variant="filled"
  sx={{
    '& .MuiFilledInput-input.Mui-disabled': {
      color: 'black'
    }
  }}
/>

无效原因说明 #

MUI的TextField不是简单封装原生input，它会生成多层嵌套DOM结构，且自带优先级更高的内置状态样式。你通过inputProps.style设置的颜色，优先级低于MUI为disabled状态预设的.Mui-disabled类样式规则，所以未选中时不生效；只有文本选中时，浏览器默认的选中样式优先级更高，才会显示你设置的黑色。

MUI基于CSS-in-JS实现组件样式，内置状态类的样式特异性高于普通内联样式，必须用更精准的选择器才能覆盖预设规则。

内容的提问来源于stack exchange，提问作者János