如何更改禁用的 TextField Material UI React js 的字体颜色

Question

我正在尝试更改禁用的 TextField 字体颜色，并且我在 stackoverflow 中关注了有关它的相关问题，但是当我创建如下所示的新 TextField 时，它不起作用并且不显示任何内容。

import {withStyles} from '@material-ui/core/styles';
import TextField from "@material-ui/core/TextField";


const myTextField = withStyles({
root: {
"& .MuiInputBase-root.Mui-disabled": {
    color: "rgba(0, 0, 0,0.0)"
}
}
})(TextField);


             

                                        <myTextField
                                            value={user  != null ? user.nam : null}
                                            disabled={true}
                                            variant="outlined"
                                            margin="normal"
                                            fullWidth
                                            id="nam"
                                            autoFocus
                                            label="nam"
                                        />



                                        <TextField
                                            value={user  != null ? user.famil : null}
                                            disabled={true}
                                            variant="outlined"
                                            margin="normal"
                                            fullWidth
                                            id="famil"
                                            autoFocus
                                            label="famil"
                                        />

Answer 1

我的重点是我使用小写名称来表示 React Component 。 我将“myTextField”更新为“MyTextField”并且它有效。

您必须使用的另一件事 .MuiFormLabel-root.Mui-disabled 类 更改字体颜色。 .MuiInputBase-root.Mui-disabled 类只是更改 TextField 的标签字体颜色。

const MyTextField = withStyles({
root: {
"& .MuiInputBase-root.Mui-disabled": {
    color: "rgba(0, 0, 0,0.0)"
},
"& .MuiFormLabel-root.Mui-disabled": {
    color: "rgba(0, 0, 0,0.0)"
},

}
})(TextField);

Answer 2

您可能有兴趣让文本字段继承其颜色，就好像它没有被禁用一样，而不必自己设置颜色：

<TextField
  ...
  disabled={true}
  InputProps={{
    sx: {
      "&.MuiInputBase-root.Mui-disabled": { color: "unset" },
      "& .MuiInputBase-input.Mui-disabled": {
        WebkitTextFillColor: "unset",
      },
    },
  }}
/>