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

6ie5vjzr  于 2023-04-22  发布在  TypeScript
关注(0)|答案(1)|浏览(104)

在我的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文件。
谢谢你的时间。

kmbjn2e3

kmbjn2e31#

解决方案如下(* 红色和蓝色只是为了好玩 *)。
一些选择器非常长,以确保它们比Material-UI使用的选择器具有更高的特异性。
注意:MUI文档中说可以使用MuiTextField来更改主题Text Field component的默认props。您的示例代码使用了MuiInputBase。为了限制InputLabel组件覆盖Input字段的上下文,可以使用TextField组件。下面的解决方案假设使用TextField组件。
还要注意,一些选择器使用.MuiFormLabel-colorPrimary。这假设颜色属性设置为默认值primary。如果您使用不同的颜色属性值,您可以为这些值创建root的同级条目,或者修改下面受影响的选择器以考虑不同的颜色属性值,或者使用variants和/或styled创建这些选择器的异常。你也可以简单地从下面的选择器中删除.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'
                    }
                }
            }
        }
    }
} );

相关问题