如何更改禁用的 MUI 文本字段的文本颜色 | MUI v5？

Question

我想更改禁用的 MUI TextField 的字体颜色。它应该是黑色的，以便可见。

这是代码

   <TextField
     fullWidth
     variant="standard"
      size="small"
     id="id"
     name="name"
     type="text"
     InputProps={{disableUnderline: true}}
     disabled={true}
    />

我删除了标准文本字段的下划线。现在我希望禁用时文本颜色为黑色。

Answer 1

受 Madhuri 解决方案的启发，您还可以使用 sx 属性而不导入 styled：

   <TextField
     fullWidth
     variant="standard"
     size="small"
     id="id"
     name="name"
     type="text"
     InputProps={{disableUnderline: true}}
     disabled={true}
     sx={{
       "& .MuiInputBase-input.Mui-disabled": {
         WebkitTextFillColor: "black",
       },
     }}
    />

Answer 2

您需要使用“.Mui-disabled”类来覆盖所需的CSS，如下所示，

import TextField from "@mui/material/TextField";
import { styled } from "@mui/material/styles";

const CustomDisableInput = styled(TextField)(() => ({
  ".MuiInputBase-input.Mui-disabled": {
    WebkitTextFillColor: "#000",
    color: "#000"
  }
}));

function App() {
  return (
    <>
      <span>Disabled Input:</span>
      <CustomDisableInput
        fullWidth
        variant="standard"
        size="small"
        id="id"
        name="name"
        type="text"
        value="your text"
        InputProps={{ disableUnderline: true }}
        disabled={true}
      />
    </>
  );
}

请在此处查看演示 - https://codesandbox.io/s/mui-customdisableinput-xl7wv