禁用输入时如何更改 Material UI TextField 的输入颜色 [MUI v: 5.0.8] [重复]

Question

我想在禁用输入时更改边框颜色和文本颜色。我尝试了所有变体，如下所示：

const textFieldStyle = {
    '& label': {
        color: darkMode?'#1976d2':'',
    },

    '& .MuiOutlinedInput-root': {
        color:darkMode?'#1976d2':'',
        '& fieldset': {
          borderColor:darkMode?'#1976d2':'',
        },
        '&:hover fieldset': {
            borderColor: darkMode?'#1976d2':'',
        }, 
 
    },
    "& input.Mui-disabled": {
        color: "green"
      }

};

<TextField value={formState.vinInput} type="text" label="Stack" sx={textFieldStyle}/>

样式的其余部分就像一般颜色和焦点颜色一样正常工作！

Answer 1

您可以在 v4 中使用此代码：

 MuiInputBase: {
    root: {
      "&$disabled": {
        color: "red",
        border: "1px solid red"
      }
    }
  }

基于版本 5 中的 Material-ui 文档 用于 JSS 的 $ 语法不适用于 Emotion。您需要将这些选择器替换为有效的类选择器。

这就是风格

    const useStyles = makeStyles({
    customDisable: {
      "& .MuiInputBase-input.Mui-disabled": {
        color: "red !important",
        "-webkit-text-fill-color": "red !important",
        borderColor: "red !important"
      },
      "& .Mui-disabled .MuiOutlinedInput-notchedOutline": {
        borderColor: "red !important"
      }
    }
  });

然后像这样在 TextField 中

<TextField
        disabled
        className={classes.customDisable}
        id="outlined-disabled"
        defaultValue="Hello World"
      />

这里是Codesandbox