[英]How to change text color of disabled MUI Text Field | MUI v5?
I want to alter the font colour of disabled MUI TextField.我想更改禁用的 MUI TextField 的字体颜色。 It should be black so that it is visible.
它应该是黑色的,以便可见。
Here is code这是代码
<TextField
fullWidth
variant="standard"
size="small"
id="id"
name="name"
type="text"
InputProps={{disableUnderline: true}}
disabled={true}
/>
I removed underline for standard text Field.我删除了标准文本字段的下划线。 Now I want text color black when it is disabled.
现在我想要文本颜色为黑色,当它被禁用时。
You need to use ".Mui-disabled" class to override required css as below,您需要使用“.Mui-disabled” class 来覆盖所需的 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}
/>
</>
);
}
Please check demo here - https://codesandbox.io/s/mui-customdisableinput-xl7wv请在此处查看演示 - https://codesandbox.io/s/mui-customdisableinput-xl7wv
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.