MUI中makeStyles样式失效，如何替代行内sx设置按钮样式？

1. 使用MUI v5官方推荐的styled API #

这是v5替代makeStyles的核心方案，基于Emotion实现，样式优先级足够覆盖组件默认样式。

示例代码：

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

const CustomButton = styled(Button)(({ theme }) => ({
  backgroundColor: '#2e7d32',
  color: '#ffffff',
  '&:hover': {
    backgroundColor: '#1b5e20',
  },
  borderRadius: '4px',
}));

// 调用自定义组件
<CustomButton>自定义样式按钮</CustomButton>

2. 通过自定义主题批量覆盖按钮样式 #

如果需要统一修改项目内按钮的默认样式，推荐通过自定义主题实现：

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

const customTheme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          backgroundColor: '#1976d2',
          color: '#fff',
          '&:hover': {
            backgroundColor: '#1565c0',
          },
        },
      },
    },
  },
});

// 在根组件中包裹ThemeProvider
function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <Button>主题定制按钮</Button>
    </ThemeProvider>
  );
}

3. 使用Emotion的css函数生成类名 #

若习惯类名写法，可直接用Emotion的css函数定义样式：

import { css } from '@emotion/react';
import Button from '@mui/material/Button';

const buttonCss = css`
  background-color: '#f57c00';
  color: '#ffffff';
  &:hover {
    background-color: '#ef6c00';
  }
`;

<Button className={buttonCss}>类名样式按钮</Button>

为什么makeStyles不生效？ #

MUI v5中，makeStyles属于旧版@material-ui/styles包，其生成的样式优先级低于v5默认的Emotion样式，因此会被组件默认样式覆盖。如果非要临时使用makeStyles，可以通过!important强制提升优先级，但官方已废弃该方案，不推荐长期使用：

// 不推荐的临时方案
import { makeStyles } from '@material-ui/styles';

const useStyles = makeStyles({
  button: {
    backgroundColor: '#d32f2f !important',
    color: '#fff !important',
  },
});

const classes = useStyles();
<Button className={classes.button}>强制生效按钮</Button>

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