全局覆盖Typography颜色为何会影响AlertTitle的颜色？

这是Material UI的默认行为，原因在于AlertTitle组件底层是基于Typography实现的——它本质上就是一个特定配置的Typography实例。

默认情况下你觉得两者颜色独立，是因为AlertTitle内置了对应severity的颜色样式，优先级高于Typography的默认颜色。比如success类型的AlertTitle，默认会使用主题里success.dark对应的颜色（也就是你提到的rgb(30, 70, 32)），所以能覆盖Typography的默认黑色。但当你全局覆盖MuiTypography-root的color属性时，这个全局样式的优先级和AlertTitle的内置样式持平甚至更高，就会把原本的颜色覆盖掉。

解决方法 #

• 方法一：单独还原AlertTitle的颜色
  在主题配置里同时覆盖MuiAlertTitle的样式，让它继承Alert的对应severity颜色，或者手动指定：

  const theme = createTheme({
    components: {
      MuiTypography: {
        styleOverrides: {
          root: {
            color: "red",
          },
        },
      },
      MuiAlertTitle: {
        styleOverrides: {
          root: {
            // 继承Alert的颜色，自动匹配不同severity
            color: "inherit",
            // 也可以针对不同severity单独设置
            '&.MuiAlert-success &': {
              color: 'rgb(30, 70, 32)'
            }
          },
        },
      },
    },
  });
  

• 方法二：缩小Typography全局覆盖的范围
  不要直接覆盖MuiTypography-root，而是针对特定变体（比如h1、body1）或者自定义类来设置，避免影响所有基于Typography的组件：

  const theme = createTheme({
    components: {
      MuiTypography: {
        styleOverrides: {
          // 只修改h1变体的颜色
          h1: {
            color: "red",
          },
        },
      },
    },
  });
  

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