React MUI样式冲突：共享库自定义Button样式被官方组件覆盖

方法1：提升CSS Modules样式优先级 #

CSS Modules的局部类名优先级可能低于MUI全局类，可通过增强选择器特异性解决：

• 在自定义CSS Modules文件中，结合MUI基础类名编写更具体的选择器：

/* CustomButton.module.css */
.customButton .MuiButton-root {
  background-color: #your-custom-color;
  border-radius: 8px;
  /* 其他自定义样式 */
}

• 紧急场景可临时用!important强制生效（不推荐大量使用）：

.customButton {
  background-color: #your-custom-color !important;
}

方法2：使用MUI官方styled组件（推荐） #

基于MUI原生的样式覆盖机制，能天然保证样式优先级：

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

const CustomButton = styled(Button)(({ theme }) => ({
  backgroundColor: theme.palette.yourCustomColor.main,
  '&:hover': {
    backgroundColor: theme.palette.yourCustomColor.dark,
  },
  // 其他自定义样式规则
}));

export default CustomButton;

styled组件生成的样式会后于原生MUI样式注入，优先级更高。

方法3：调整样式加载顺序 #

确保共享库的自定义样式在MUI样式之后加载：

• 共享库组件文件中，最后导入CSS Modules：

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

const CustomButton = ({ children }) => (
  <Button className={styles.customButton}>{children}</Button>
);

export default CustomButton;

• 业务应用中，先导入MUI组件，再导入共享库组件：

import { Button as MuiButton } from '@mui/material';
import CustomButton from 'your-shared-library';

方法4：全局覆盖MUI Button样式 #

如果需要所有场景的MUI Button都应用自定义样式，可在共享库中提供全局主题配置：

// 共享库主题文件
import { createTheme } from '@mui/material/styles';

export const getCustomMuiTheme = () => createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          backgroundColor: #your-custom-color,
          fontSize: '14px',
          // 所有Button的全局样式
        },
      },
    },
  },
});

业务应用中通过ThemeProvider注入该主题：

import { ThemeProvider } from '@mui/material/styles';
import { getCustomMuiTheme } from 'your-shared-library';

function App() {
  return (
    <ThemeProvider theme={getCustomMuiTheme()}>
      {/* 应用所有内容 */}
    </ThemeProvider>
  );
}

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