React 18下MUI主题样式无法应用到按钮的问题求助

问题根源 #

• 混用MUI版本：依赖中同时存在v4的@material-ui/core和v5的@mui/material，版本冲突导致样式逻辑混乱。
• ThemeProvider导入错误：使用了@mui/styles中的ThemeProvider，它不支持v5组件的主题样式覆盖机制。
• createTheme来源错误：从@mui/system导入的createTheme不处理组件级的styleOverrides配置。
• 手动添加内置类名：按钮上手动拼接MuiButton-outlined类名，干扰默认样式优先级，属于多余操作。

解决步骤 #

1. 清理冲突依赖

移除v4版本的@material-ui/core，避免版本冲突：

npm uninstall @material-ui/core
# 或使用yarn
yarn remove @material-ui/core

2. 修正主题配置文件（Theme.ts）

将createTheme从@mui/material/styles导入，而非@mui/system，确保组件样式覆盖生效：

import { createTheme } from '@mui/material/styles';

const muiTheme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        outlined: {
          borderColor: 'green',
          color: 'green',
        },
      },
    },
  },
});

export default muiTheme;

3. 替换ThemeProvider并修正组件用法

使用@mui/material中的ThemeProvider，同时移除多余的手动类名：

import { Box, Button, Card, CardContent, Grid, ThemeProvider } from "@mui/material";
import muiTheme from '../../muiTheme';

const MyDashboard: React.FC = () => {
  return (
     <ThemeProvider theme={muiTheme}>
        <Button variant="outlined">20 minutes</Button>
        {/* 其他组件代码 */}
     </ThemeProvider>
  );
};

（可选）若仍需使用makeStyles

makeStyles是v5中的遗留API，建议优先使用styled组件或sx prop。如果必须使用，需手动传递主题给useStyles：

import { Box, Button, Card, CardContent, Grid, ThemeProvider } from "@mui/material";
import { makeStyles } from '@mui/styles';
import muiTheme from '../../muiTheme';

const useStyles = makeStyles((theme: any) => ({
  outlinedButton: {
    // 自定义样式（如需要）
  },
}));

const MyDashboard: React.FC = () => {
  const classes = useStyles(muiTheme);
  return (
     <ThemeProvider theme={muiTheme}>
        <Button className={classes.outlinedButton} variant="outlined">20 minutes</Button>
     </ThemeProvider>
  );
};

完成以上修改后，按钮的绿色边框与文字颜色即可正常应用主题样式。

内容的提问来源于stack exchange，提问作者Terje Nygård