为什么Material-UI按钮的CSS样式完全没生效？

Material-UI 的样式优先级确实容易让人崩溃。你写的类名虽然加上了 !important，但 MUI 内部的 CSS-in-JS 生成的样式优先级更高，所以你的样式被干掉了。

想让自定义样式生效，最直接的办法是用 makeStyles 或者 styled API，这样生成的样式会自动提升优先级。比如用 makeStyles：

import { makeStyles } from '@material-ui/core/styles';

import Button from '@material-ui/core/Button';



const useStyles = makeStyles({

  root: {

    backgroundColor: 'red',

    color: 'white',

    padding: '1rem',

  },

});



function MyButton() {

  const classes = useStyles();

  return <Button classes={{ root: classes.root }}>点击我</Button>;

}

或者更简洁一点，用 styled：

import { styled } from '@material-ui/core/styles';

import Button from '@material-ui/core/Button';



const MyButton = styled(Button)({

  backgroundColor: 'red',

  color: 'white',

  padding: '1rem',

});



// 使用时直接 <MyButton>点击我</MyButton>

这两种方式都能让样式正确注入并且优先级足够高。别再用原生 class 直接覆盖了，那个坑太深，效率太低。

根本原因是Material-UI的样式系统用的是CSS-in-JS方案，它内部生成的类名优先级比你手动写的类高。即使你用了!important，MUI的样式加载机制也会导致覆盖失败。

解决办法有两种：

第一种是用styled API来包装Button组件，这是官方推荐方式：

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

import Button from '@mui/material/Button';



const CustomButton = styled(Button)

  background-color: red;

  color: white;

  padding: 1rem;

;



// 直接使用就行

第二种是全局覆盖主题样式，适合需要统一修改所有按钮风格的情况：

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



const theme = createTheme({

  components: {

    MuiButton: {

      styleOverrides: {

        root: {

          backgroundColor: 'red',

          color: 'white',

          padding: '1rem'

        }

      }

    }

  }

});



// 然后用ThemeProvider包裹你的应用

如果你非要用class覆盖，那得把样式注入方式改成important层级更高的写法，比如在全局CSS文件里写：

.my-button.MuiButton-root {

  background-color: red !important;

  color: white !important;

  padding: 1rem !important;

}

不过这种写法容易被MUI的样式加载顺序吃掉，建议还是用前面两种方法更稳妥。我之前也踩过这坑，用styled API是最干净的做法。