部署后自定义Material UI样式未生效的问题求助

你写的.css-i4bv87-MuiSvgIcon-root是Material UI在开发环境自动生成的带哈希的类名，但生产环境下Material UI会压缩重命名这些类名（比如变成css-xyz123-MuiSvgIcon-root），导致你的样式选择器匹配不到目标元素，所以fontSize不生效。

以下是几种可靠的修复方式，按推荐程度排序：

1. 针对MUI基础类名编写选择器 #

直接使用Material UI的基础类名MuiSvgIcon-root（这个类名的前缀部分不会随环境变化），替换掉带哈希的类名：

export const Icon = styled(Box)({
    color: "gray",
    position: "relative",

    "& .MuiSvgIcon-root": {
        fontSize: "2rem",
    },

    "&:hover": {
        color: "black",
    },
});

2. 直接封装SvgIcon组件 #

如果你的icon本身就是MUI的SvgIcon实例，直接用styled封装SvgIcon更简洁，避免嵌套容器：

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

export const StyledIcon = styled(SvgIcon)({
    fontSize: "2rem",
    color: "gray",
    "&:hover": {
        color: "black",
    },
});

然后在App.js里使用：

<StyledIcon>{icon}</StyledIcon>

3. 克隆icon元素添加样式 #

如果需要保留Box容器，可通过React.cloneElement给传入的icon直接添加样式，完全不依赖类名：

// App.js里的代码
import React from 'react';

<Icon>
  {React.cloneElement(icon, { sx: { fontSize: "2rem" } })}
</Icon>

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