如何通过createTheme自定义Material UI TextField各状态标签星号颜色

已实现的默认状态修改 #

我已经通过createTheme成功修改了TextField默认状态下标签星号的颜色，代码如下：

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

默认状态效果：

需求说明 #

现在需要实现：当TextField处于聚焦或填充状态时，星号颜色要和标签文字一致为蓝色，而不是保持当前的红色。但Mui-focused类和MuiFormLabel-asterisk不在同一元素上，不清楚怎么通过createTheme完成这个自定义设置。

当前聚焦状态表现 #

聚焦状态效果：

DevTools中元素结构：

尝试过的无效代码 #

我试过以下写法，但没有生效：

MuiFormLabel: {
  styleOverrides: {
    // 这段代码不生效
    // root: {
    //  '&.MuiFormLabel-focused': {
    //    asterisk: {
    //      color: '#E54D39',
    //    },
    //  },
    // },
    asterisk: {
    color: '#E54D39',
    },
  },
},

解决方案 #

要实现这个需求，需要在MuiFormLabel的root样式中，针对focused和filled状态，直接选择后代的asterisk元素来修改颜色。正确的代码如下：

export const theme = createTheme({
  MuiFormLabel: {
    styleOverrides: {
      asterisk: {
        color: '#E54D39', // 默认状态下的红色
      },
      root: {
        // 聚焦状态时星号同步标签颜色
        '&.Mui-focused .MuiFormLabel-asterisk': {
          color: '#1976d2', // 替换成你需要的蓝色
        },
        // 填充状态时星号同步标签颜色
        '&.MuiFormLabel-filled .MuiFormLabel-asterisk': {
          color: '#1976d2',
        },
      },
    },
  },
});

原理说明：Mui-focused和MuiFormLabel-filled是挂载在MuiFormLabel-root元素上的类，通过&.Mui-focused选中处于聚焦状态的标签根元素，再通过.MuiFormLabel-asterisk选择其内部的星号元素，就能覆盖默认的星号颜色，实现和标签文字颜色同步。

内容的提问来源于stack exchange，提问作者Ivone Djaja