MUI Button组件自定义主题颜色未生效，仅Hover时显示颜色问题求助

我来帮你排查这个问题，你遇到的情况通常是主题未正确注入或者Button变体选择不符合预期导致的，下面分步骤解决：

1. 首要检查：确认主题已通过ThemeProvider注入 #

这是最容易忽略的关键点——如果你的组件没有被ThemeProvider包裹，自定义主题根本不会生效，按钮会使用MUI默认样式，自然只有Hover时才会有颜色变化。

你需要确保应用的顶层组件被ThemeProvider包裹，像这样：

import { ThemeProvider } from '@mui/material/styles';
// 导入你定义的theme

function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* 所有用到MUI组件的代码都要放在这个包裹里 */}
      <YourComponentWithButtons />
    </ThemeProvider>
  );
}

2. 针对Button变体调整配置 #

MUI的Button不同变体（variant）的默认样式逻辑不同，这也是你看到颜色异常的核心原因：

第一个Button（无variant，默认是text变体） #

text变体的设计就是默认状态下背景透明，仅显示文字颜色，只有Hover时才会出现背景色变化。如果想要默认就显示填充色，需要把variant改成contained：

// 改进后的代码：去掉冗余的Typography，直接用Button的属性控制
<Button variant="contained" color="primary" size="sm"> 
  Sign In 
</Button>

另外，你不需要在Button里嵌套Typography来设置文字颜色——Button的color属性已经会自动控制文字颜色（contained变体用对应颜色的contrastText，text/outlined变体用对应颜色的主色），嵌套Typography反而可能干扰样式。

第二个Button（contained secondary） #

如果已经正确注入主题，但这个按钮还是只有Hover时显示颜色，建议：

• 打开浏览器开发者工具，查看Button元素的background-color样式，检查是否被其他全局CSS或组件样式覆盖（划掉的样式说明被优先级更高的规则覆盖）。
• 确认你的MUI版本是v5（你的主题代码是v5的createTheme写法，如果是v4需要用createMuiTheme）。

3. 额外优化：检查深色主题的文字对比度 #

你的主题是dark模式，但text.primary设置的是rgba(43,43,43,0.87)，这个颜色在深色背景下会非常不明显（接近黑色）。如果你的text变体按钮用了这个文字颜色，默认状态下几乎看不到，只有Hover时背景色变化才会凸显文字，建议调整text.primary为浅色，比如：

text: {
  primary: 'rgba(255,255,255,0.87)', // 深色模式下文字用浅色更清晰
  secondary: 'rgba(160,160,160,0.54)',
  disabled: 'rgba(106,111,83,0.38)',
  hint: 'rgba(57,57,57,0.38)',
},

通过以上步骤，应该就能解决按钮颜色仅Hover时显示的问题了。

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