Heroku部署后自定义MUI样式未生效，求解决思路

你遇到的问题核心是MUI在生产环境会动态生成压缩后的哈希类名，本地开发时的类名（比如.css-yuzg60-MuiButtonBase-root-MuiPaginationItem-root）在部署到Heroku后会被重命名，导致你写在index.css里的样式找不到对应元素，自然无法生效。

解决思路 #

1. 优先使用MUI官方推荐的样式方案（最可靠） #

MUI提供了多种自定义样式的方式，完全可以替代全局CSS覆盖，且不会受类名变化影响：

• 使用styled组件封装
  直接基于MUI组件创建自定义样式的组件，示例：

  import { styled } from '@mui/material/styles';
  import PaginationItem from '@mui/material/PaginationItem';
  
  const CustomPaginationItem = styled(PaginationItem)(({ theme }) => ({
    '&.Mui-selected': {
      backgroundColor: 'var(--clr-mocha-2)',
      color: 'white',
    },
    '&:hover': {
      backgroundColor: 'var(--clr-mocha-3)',
    },
  }));
  

  之后直接用<CustomPaginationItem>替代原组件即可。

• 使用sx属性内联样式
  在组件上直接通过sx属性写样式，优先级高于默认样式：

  <PaginationItem
    sx={{
      '&.Mui-selected': {
        bgcolor: 'var(--clr-mocha-2)',
        color: 'white',
      },
      '&:hover': {
        bgcolor: 'var(--clr-mocha-3)',
      },
    }}
  />
  

• 全局主题定制
  通过createTheme修改组件的默认样式，全局生效：

  import { createTheme, ThemeProvider } from '@mui/material/styles';
  
  const theme = createTheme({
    components: {
      MuiPaginationItem: {
        styleOverrides: {
          root: {
            '&.Mui-selected': {
              backgroundColor: 'var(--clr-mocha-2)',
              color: 'white',
            },
            '&:hover': {
              backgroundColor: 'var(--clr-mocha-3)',
            },
          },
        },
      },
      MuiSelect: {
        styleOverrides: {
          root: {
            '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
              borderColor: 'var(--clr-mocha-2)',
            },
          },
        },
      },
      MuiPaper: {
        styleOverrides: {
          root: {
            '&.MuiMenu-paper, &.MuiPopover-paper': {
              boxShadow: 'none',
            },
          },
        },
      },
    },
  });
  
  // 在根组件包裹ThemeProvider
  function App() {
    return <ThemeProvider theme={theme}>{/* 你的组件 */}</ThemeProvider>;
  }
  

2. 继续使用全局CSS，但避免依赖动态哈希类名 #

如果坚持用index.css，可以通过以下方式规避类名变化问题：

• 给MUI组件添加自定义className
  给目标组件加固定的自定义类名，比如：

  <PaginationItem className="custom-pagination-item" />
  

  然后在index.css中写：

  .custom-pagination-item.Mui-selected {
    background-color: var(--clr-mocha-2) !important;
    color: white;
  }
  .custom-pagination-item:hover {
    background-color: var(--clr-mocha-3) !important;
  }
  

• 使用MUI的全局类名组合
  放弃哈希类名，直接用MUI提供的稳定全局类名，比如：

  .MuiPaginationItem-root.Mui-selected {
    background-color: var(--clr-mocha-2) !important;
    color: white;
  }
  .MuiPaginationItem-root:hover {
    background-color: var(--clr-mocha-3) !important;
  }
  .MuiSelect-root.Mui-focused .MuiOutlinedInput-notchedOutline {
    border-color: var(--clr-mocha-2) !important;
  }
  .MuiMenu-paper, .MuiPopover-paper {
    box-shadow: none !important;
  }
  

3. 检查CSS导入顺序 #

确保你的index.css是在MUI相关样式之后导入的，比如在App.js中：

// 先导入MUI组件或样式
import { Pagination } from '@mui/material';
// 再导入你的全局CSS
import './index.css';

这样全局CSS的优先级才会高于MUI的默认样式（即使加了!important，导入顺序也会影响生效结果）

内容的提问来源于stack exchange，提问作者עמית שוקרון