不使用MUI主题时，覆盖MUI组件CSS的最优方法是什么？

下面是几种实用的方案，根据你的项目场景选择即可：

1. 自定义className + 全局/局部CSS #

直接给MUI组件添加自定义className，然后编写CSS覆盖原有样式。如果MUI默认样式优先级更高，要么用更精确的选择器（比如结合MUI生成的类名，如.MuiButton-root.custom-btn），要么加!important强制覆盖。

示例代码：

import { Button } from '@mui/material';
import './MyStyles.css';

function MyBtn() {
  return <Button className="custom-btn">点我</Button>;
}

对应的CSS：

.custom-btn {
  background: #ff4081 !important;
  color: #fff;
  border-radius: 8px;
}

2. 内联style属性 #

简单样式直接用style属性编写，优先级高于组件默认样式，无需额外CSS文件，适合快速调整。

示例：

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

function MyBtn() {
  return (
    <Button
      style={{
        background: '#ff4081',
        color: '#fff',
        borderRadius: '8px'
      }}
    >
      点我
    </Button>
  );
}

缺点是复杂样式（比如伪类、媒体查询）不好实现，也无法复用。

3. 用MUI自带的sx属性 #

MUI组件都支持sx属性，写CSS-in-JS样式很方便，优先级足够高，就算不用主题也能直接使用基础样式写法，还支持伪类、媒体查询等特性。

示例：

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

function MyBtn() {
  return (
    <Button
      sx={{
        bgcolor: '#ff4081',
        color: '#fff',
        borderRadius: 2, // MUI的spacing单位，2等于8px
        '&:hover': {
          bgcolor: '#ff1a66'
        }
      }}
    >
      点我
    </Button>
  );
}

这是MUI官方推荐的无主题样式调整方式之一，写法简洁且灵活。

4. CSS模块（CSS Modules） #

用CSS模块可以避免样式全局污染，适合大型项目。将CSS文件命名为xxx.module.css，导入后使用模块化的类名即可。

示例：
新建BtnStyles.module.css：

.customBtn {
  background: #ff4081;
  color: #fff;
}

组件中使用：

import { Button } from '@mui/material';
import styles from './BtnStyles.module.css';

function MyBtn() {
  return <Button className={styles.customBtn}>点我</Button>;
}

5. 用styled-components这类CSS-in-JS库 #

如果项目已经在用styled-components，直接封装MUI组件就能完全自定义样式，适合复杂的样式需求和组件复用。

示例：

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

const CustomBtn = styled(Button)`
  background: #ff4081;
  color: #fff;
  border-radius: 8px;

  &:hover {
    background: #ff1a66;
  }
`;

function MyBtn() {
  return <CustomBtn>点我</CustomBtn>;
}

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