无法从主题.ts 更改焦点上的 Mui 输入标签颜色

Question

在我的next.js应用程序中，我试图改变mui (Material UI)输入字段的标签颜色，但它没有应用任何样式。

Mui版本是最新的。

这是我的主题的代码块。Ts文件，该文件假定更改输入字段的边框底部颜色并更改标签颜色。但是它只是改变了边框底部的颜色。

MuiInputBase: {
styleOverrides: {
root: {
fontFamily: "Manrope",
// default state standard variant
"&.MuiInputBase-root": {
color: "#2A2B2F",
// changing borderBottom color on focus working*
"&.Mui-focused:after": {
borderBottom: "2px solid #2E98EF",   <-- It is working
},
},
// focused state of label of standard variant
"&.Mui-focused .MuiInputLabel-root": {
color: "#2E98EF",      <-- It is not working.
}
},
},
},

我尝试使用global.css文件改变标签的颜色。复制粘贴相同的类，并给它另一种颜色，它确实有效。

.muisomething.Mui-focused{
color : red
}

我也试着用SX道具修改它，它也起作用。但我想从主题出发。Ts或theme.js文件。这是不可能的。

甚至我都看不到我在主题中使用的样式。

我也尝试直接针对标签

// focused state of label of standard variant
"& label.Mui-focused": {
color: "#2E98EF",
},

就像这样，但是样式没有显示出来，但是边框底部是工作的。

我想从主题来处理它。ts文件。

我想知道你对这个问题的宝贵意见。让我知道我该如何处理这个主题。ts文件。

感谢您的宝贵时间。

Answer 1

解决方案如下(红色和蓝色只是为了好玩)

有些选择器长得离谱，以确保它们比Material-UI使用的选择器有更高的专一性。

注意:MUI文档说你可以使用MuiTextField来改变文本字段组件的默认属性。您的示例代码使用MuiInputBase。为了限制将InputLabel组件覆盖到输入字段的上下文，可以使用TextField组件。下面的解决方案假设使用TextField组件。

还要注意一些选择器使用.MuiFormLabel-colorPrimary。这假设颜色道具被设置为默认值primary。如果你使用不同的颜色道具值，你可以为这些值创建root的兄弟条目，或者修改下面受影响的选择器以考虑不同的颜色道具值，或者使用变体和/或样式为这些选择器创建例外。您也可以简单地从下面的选择器中删除.MuiFormLabel-colorPrimary，并测试选择器是否仍然有效。

theme.ts

/* eslint-disable */
import { createTheme } from '@mui/material/styles';
import { red } from '@mui/material/colors';
export const theme = createTheme( {
components: {
MuiTextField: {
styleOverrides: {
root: {
// Default state of text input field font.
'& .MuiInputBase-input.MuiInput-input': {
fontFamily: "Manrope",
color: '#2A2B2F',
},
// Default state of underline.
'& .MuiInputBase-root.MuiInput-root.MuiInput-underline.MuiInputBase-formControl::before': {
borderBottomColor: red[900],
},
// On hover state of underline.
'& .MuiInputBase-root.MuiInput-root.MuiInput-underline.MuiInputBase-formControl:hover::before': {
borderBottomColor: 'blue'
},
// On focus state of underline.
'& .MuiInputBase-root.MuiInput-root.MuiInput-underline.MuiInputBase-formControl.Mui-focused::after': {
borderBottom: '2px solid #2E98EF'
},
// Default state of label.
'& .MuiFormLabel-root.MuiInputLabel-root.MuiInputLabel-formControl.MuiInputLabel-animated.MuiInputLabel-standard.MuiFormLabel-colorPrimary.MuiInputLabel-root.MuiInputLabel-formControl.MuiInputLabel-animated.MuiInputLabel-standard': {
color: red[900]
},
// On focus state of label (after text is entered into the form field).
'& .MuiFormLabel-root.MuiInputLabel-root.MuiInputLabel-formControl.MuiInputLabel-animated.MuiInputLabel-shrink.MuiInputLabel-standard.MuiFormLabel-colorPrimary.MuiFormLabel-filled.MuiInputLabel-root.MuiInputLabel-formControl.MuiInputLabel-animated.MuiInputLabel-shrink.MuiInputLabel-standard': {
color: '#2E98EF'
}
}
}
}
}
} );