MUI5中makeStyles/createStyles样式仅对部分组件生效求助

方法1：修正选择器命中内部SVG元素 #

修改logoIcon的样式规则，直接选中组件内部的<svg>标签：

const useStyles = makeStyles((theme) =>
  createStyles({
    root: {
      backgroundColor: theme.palette.primary.light,
    },
    logoIcon: {
      "& svg": {
        height: "5rem",
        width: "5rem",
      },
    },
  })
);

方法2：用!important强制提升优先级（临时应急用） #

如果需要快速验证效果，可以给样式加上!important：

logoIcon: {
  height: "5rem !important",
  width: "5rem !important",
},

方法3：改用MUI5推荐的样式方案（长期最佳实践） #

@mui/styles是MUI5的兼容包，官方更推荐使用内置的sx属性或styled API：

// 直接用已验证生效的sx属性
<PetsIcon sx={{ height: "5rem", width: "5rem" }} />

// 或者用styled组件封装
import { styled } from '@mui/material/styles';
const StyledPetsIcon = styled(PetsIcon)`
  height: 5rem;
  width: 5rem;
`;

// 组件中直接使用封装后的图标
<StyledPetsIcon />

MUI的图标组件（比如PetsIcon）继承自SvgIcon，DOM结构是外层容器（通常是<span>）包裹内部<svg>标签。你传入的className={classes.logoIcon}会被添加到外层容器上，而容器的宽高样式无法覆盖内部<svg>的默认样式（MUI给svg设置了优先级更高的内置类或内联样式）。

而sx属性会直接将样式应用到内部的<svg>元素上，因此可以正常生效。

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