MUI v5.0.8版本下如何修改禁用状态TextField组件的输入及边框颜色

原因说明 #

你原有写法不生效有三个核心问题：

• 仅选中了输入框本身的禁用类，未覆盖边框对应的fieldset节点、标签label节点的禁用状态样式
• MUI默认给禁用状态的输入文本增加了-webkit-text-fill-color默认属性，优先级高于普通color设置，仅写color无法覆盖
• 选择器层级不足，无法覆盖MUI内置的禁用状态高优先级样式

修正后的样式代码 #

const textFieldStyle = {
    '& label': {
        color: darkMode?'#1976d2':'',
    },
    // 禁用状态下的标签样式
    '& label.Mui-disabled': {
        color: "green",
        WebkitTextFillColor: "green"
    },
    '& .MuiOutlinedInput-root': {
        color:darkMode?'#1976d2':'',
        '& fieldset': {
          borderColor:darkMode?'#1976d2':'',
        },
        '&:hover fieldset': {
            borderColor: darkMode?'#1976d2':'',
        },
        // 禁用状态下的输入框根节点样式
        '&.Mui-disabled': {
            // 输入文本颜色
            color: "green",
            WebkitTextFillColor: "green",
            // 边框颜色
            '& fieldset': {
                borderColor: "green"
            }
        }
    },
};

适配说明 #

如果需要跟随深色模式调整禁用状态的颜色，直接把代码里的green替换为你对应的darkMode三元判断逻辑即可。

内容的提问来源于stack exchange，提问作者Rares D