更改材质 UI 中的 NotchedOutline 跨度文本颜色

Question

我目前正在尝试自定义 materialUI 的文本字段。 Here is what I am trying to change

我在尝试访问和更改文本所在的 span 标记的颜色时遇到了困难。同时，当 textfield是重点。我不太明白这些（伪选择器？）是如何工作的。就此而言，我如何以及何时嵌套或使用它们。

例如

"& .MuiOutlinedInput-root": {
        "& fieldset": {
          borderColor: "rgba(0, 0, 0, 0.23)"  // default
        },
        "&.Mui-focused fieldset": {
          border: "2px solid red"             // focus
        }

任何帮助将不胜感激！

Answer 1

要设置 TextField 的标签样式，请使用 InputLabelProps 并定位标签的焦点类。

<TextField
    InputLabelProps={{ classes: { focused: classes.labelRoot } }}
    variant="outlined"
    label="Colored Label"
/>

const useStyles = makeStyles((theme) => ({
    labelRoot: {
        "&&": {
            color: "pink"
        }
    }
}));

在 labelRoot 类中，"&&" 用于增加覆盖默认样式的特异性。

这是工作演示：

在主题中设置样式：-

const theme = createMuiTheme({
    overrides: {
        MuiFormLabel:{
            root:{
                '&$focused':{
                    color:'green'
                }
            },
        }
    }
});