MUI样式生产环境不生效问题求助（附代码）

MUI在生产环境会自动对组件的CSS类名做哈希压缩，你写死的.css-10hburv-MuiTypography-root是开发环境的临时类名，到生产环境会变成完全不同的哈希字符串，所以样式失效。这是MUI默认的优化机制，用来减小CSS体积、避免类名冲突。

以下是几种可靠的解决办法，按推荐程度排序：

方案1：直接给ListItemText的主文本设置样式（最推荐） #

ListItemText组件提供了primaryTypographyProps属性，可以直接给内部的Typography传递样式，完全绕开类名问题：

<ListItemText 
  primary={list.text} 
  primaryTypographyProps={{
    sx: {
      fontSize: "14px",
      fontWeight: 500,
      lineHeight: "16.94px"
    }
  }}
/>

记得把ListItemButton的sx里那段& .css-10hburv-MuiTypography-root删掉。

方案2：用MUI的稳定全局类名 #

MUI给组件提供了不会变的全局类名，比如ListItemText里的主文本类名是.MuiListItemText-primary，直接用这个类名写样式：

<ListItemButton
  sx={{
    // 保留你原来的其他样式
    "& .MuiListItemText-primary": {
      fontSize: "14px",
      fontWeight: 500,
      lineHeight: "16.94px"
    },
    // hover等状态样式保留
  }}
>

这个类名在开发和生产环境都不会变，能稳定生效。

方案3：自定义Styled组件 #

用MUI的styled函数封装一个自定义的ListItemButton，把样式写在里面：

import { styled } from "@mui/material/styles";
import ListItemButton from "@mui/material/ListItemButton";

const StyledListItemButton = styled(ListItemButton)(({ theme }) => ({
  borderRadius: 1,
  "& .MuiListItemText-primary": {
    fontSize: "14px",
    fontWeight: 500,
    lineHeight: "16.94px"
  },
  "&:hover": {
    // 这里写hover样式
  },
  // 其他状态样式也可以统一写在这里
}));

之后代码里用StyledListItemButton替换原来的ListItemButton即可。

额外小提示 #

注意你代码里的这段：

const mt = process.env.NODE_ENV === 'development' ? "177px" : 15;

开发环境用字符串单位，生产环境用数值，容易导致布局不一致。建议统一成数值，MUI会自动转成px：

const mt = process.env.NODE_ENV === 'development' ? 177 : 15;

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