通过自定义主题修改MUI按钮样式无效，求正确实现方法

首先你的代码有两个关键错误，导致样式不生效：

• components配置是和palette同级的，不能放在palette内部
• 配置MuiButton的root时，不需要嵌套& .MuiButton-root，因为当前作用域已经是按钮的根元素，且要通过styleOverrides字段指定样式覆盖

正确的基础写法 #

export const lightTheme = createTheme({
  palette: {
    // 你的palette原有配置...
  },
  components: { // 与palette同级
    MuiButton: {
      styleOverrides: {
        root: {
          backgroundColor: 'orange',
          color: 'blue',
          // 可追加hover等状态样式
          '&:hover': {
            backgroundColor: 'darkorange',
          }
        }
      }
    }
  }
});

其他修改方式 #

1. 结合自定义调色板变量复用

先在调色板中定义统一颜色变量，再在组件样式中引用，方便后续全局调整：

export const lightTheme = createTheme({
  palette: {
    custom: {
      buttonBg: 'orange',
      buttonText: 'blue'
    },
    // 其他palette配置...
  },
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          backgroundColor: theme => theme.palette.custom.buttonBg,
          color: theme => theme.palette.custom.buttonText,
        }
      }
    }
  }
});

2. 针对特定按钮变体修改

如果只需修改特定类型（如contained、outlined）的按钮，可直接针对对应变体字段配置：

export const lightTheme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        contained: {
          backgroundColor: 'orange',
          color: 'blue'
        },
        outlined: {
          borderColor: 'orange',
          color: 'orange'
        }
      }
    }
  }
});

3. 全局样式组件覆盖

使用MUI的GlobalStyles组件实现全局按钮样式覆盖，适合需要强制覆盖所有场景的情况：

import { GlobalStyles } from '@mui/material';

// 在App根组件中引入
function App() {
  return (
    <>
      <GlobalStyles styles={{
        '.MuiButton-root': {
          backgroundColor: 'orange',
          color: 'blue',
          '&:hover': {
            backgroundColor: 'darkorange'
          }
        }
      }} />
      {/* 你的页面内容 */}
    </>
  );
}

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