在 MUI 中更改禁用的 TextField 的字体颜色,可以通过自定义样式来实现。以下是一种可能的解决方案:
makeStyles
函数创建一个自定义样式的钩子函数。例如:import { makeStyles } from '@mui/styles';
const useStyles = makeStyles({
disabledTextField: {
'& .MuiInputBase-root.Mui-disabled': {
color: 'red', // 这里可以更改为你想要的字体颜色
},
},
});
useStyles
钩子函数,并将自定义样式应用于禁用的 TextField 组件。例如:import TextField from '@mui/material/TextField';
function MyComponent() {
const classes = useStyles();
return (
<TextField
disabled
label="Disabled TextField"
className={classes.disabledTextField}
/>
);
}
这样,禁用的 TextField 组件的字体颜色就会被更改为你指定的颜色。
需要注意的是,以上代码中的 makeStyles
和 @mui/styles
是 MUI v5 版本的写法,如果你使用的是 MUI v4 版本,可以使用 makeStyles
和 @material-ui/styles
。
此外,如果你想了解更多关于 MUI 的相关知识和使用方法,可以参考腾讯云的 MUI 相关产品和文档:
领取专属 10元无门槛券
手把手带您无忧上云