Reactjs 自定义变量默认、聚焦和填充时所需TextField中标签的星号 colored颜色

发布于10月12日

在默认状态下，我可以将星号的 colored颜色更改为createTheme.

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

文本字段-默认变量

但是星号 colored颜色应该像标签一样是蓝色的，而不是在文本字段被聚焦或填充时是红色的.但我不知道如何在createTheme中进行定制，因为Mui-focused和MuiFormLabel-asterisk不在同一个元素中.

专注于Textfield的变体

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

推荐答案

从MUI文档100:

您可以在组件的每个槽中将回调作为值传递 styleOverrides以应用基于props 的样式.

ownerStateprops 是你通过的公共props 的组合组件+组件的内部状态.

作为MuiFormLabel的ownersState的一部分，你可以得到focused和filled个州，这将给你你想要的东西.例如:

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

这将产生: