在我的next.js应用程序中,我试图更改mui(Material UI)输入字段的标签颜色,但它没有应用任何样式。
Mui版本是最新的。
这是我的theme.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.
}
},
},
},
我试着用globalidercss文件改变标签的颜色。复制粘贴相同的类,并给予它另一种颜色,它确实工作。
.muisomething.Mui-focused{
color : red
}
我也试过用SX prop修改它,它也工作.但我希望它是从theme.ts或theme. js文件处理.这是不发生.
甚至我不能看到我的风格,我用在主题.ts文件从检查浏览器所以!重要的是也不工作。
我也试着直接瞄准唱片公司
// focused state of label of standard variant
"& label.Mui-focused": {
color: "#2E98EF",
},
就像那样,但样式没有显示出来,但边框底部是工作。
我希望它是从主题处理。ts文件。
想知道你对这个问题的宝贵意见。让我知道我如何从主题处理这个。ts文件。
谢谢你的时间。
1条答案
按热度按时间kmbjn2e31#
解决方案如下(* 红色和蓝色只是为了好玩 *)。
一些选择器非常长,以确保它们比Material-UI使用的选择器具有更高的特异性。
注意:MUI文档中说可以使用MuiTextField来更改主题Text Field component的默认props。您的示例代码使用了MuiInputBase。为了限制InputLabel组件覆盖Input字段的上下文,可以使用TextField组件。下面的解决方案假设使用TextField组件。
还要注意,一些选择器使用
.MuiFormLabel-colorPrimary
。这假设颜色属性设置为默认值primary
。如果您使用不同的颜色属性值,您可以为这些值创建root
的同级条目,或者修改下面受影响的选择器以考虑不同的颜色属性值,或者使用variants和/或styled创建这些选择器的异常。你也可以简单地从下面的选择器中删除.MuiFormLabel-colorPrimary
,然后测试这些选择器是否仍然有效。theme.ts