在变体默认、聚焦和填充的所需文本字段中自定义标签的星号颜色

Question

我可以在默认状态下通过

createTheme

更改星号的颜色。

export const theme = createTheme({
  MuiFormLabel: {
    styleOverrides: {
      asterisk: {
        color: '#E54D39',
      },
    },
  },
});

TextField - 默认变体

但是当 TextField 聚焦或填充时，星号颜色应该像标签一样是蓝色，而不是红色。但我不知道如何在

createTheme

中进行自定义，因为

Mui-focused

与

MuiFormLabel-asterisk

不在同一元素内。

TextField - 聚焦变体

MuiFormLabel: {
  styleOverrides: {
    // This is not working
    // root: {
    //  '&.MuiFormLabel-focused': {
    //    asterisk: {
    //      color: '#E54D39',
    //    },
    //  },
    // },
    asterisk: {
      color: '#E54D39',
    },
  },
},

Answer 1

来自 MUI 文档 基于 props 的覆盖：

您可以将回调作为组件的每个插槽中的值传递

styleOverrides

根据道具应用样式。

ownerState

道具是您传递的公共道具的组合 到组件+组件的内部状态。

作为

ownersState

的

MuiFormLabel

的一部分，您可以获得

focused

和

filled

状态，这将为您提供所需的内容。例如：

const theme = createTheme({
  components: {
    MuiFormLabel: {
      styleOverrides: {
        asterisk: ({ ownerState }) => ({
          color: ownerState.focused || ownerState.filled ? "inherit" : "#E54D39"
        })
      }
    }
  }
});

工作CodeSandbox：https://codesandbox.io/s/textfield-asterisk-with-ownerstate-js-7wghtl?file=/src/Demo.js:186-428