无法覆盖Material UI Icon默认样式，AccountCircleIcon尺寸设置不生效

你遇到的样式被覆盖问题核心是Material UI默认图标的CSS选择器优先级高于你自定义的样式规则，以下是可直接生效的解决方案：

方法1：使用内联样式（优先级最高，无需额外配置） #

直接给图标组件加style属性即可生效：

import AccountCircleIcon from '@material-ui/icons/AccountCircle';

const login = () => {
  return (
    <div><AccountCircleIcon style={{ fontSize: '50rem' }} /></div>
  );
};

你也可以用图标内置的fontSize属性快速调用预设尺寸，可选值有small/medium/large。

方法2：提升自定义类的优先级 #

在makeStyles的规则里添加两层&选择器，即可提高自定义样式的优先级，覆盖默认规则：

import AccountCircleIcon from '@material-ui/icons/AccountCircle';
import {makeStyles} from '@material-ui/styles';

const useStyles = makeStyles({
  avatarIcon: {
    '&&': {
      fontSize: '50rem',
    }
  },
});

const login = () => {
  const classes = useStyles();
  return (
    <div><AccountCircleIcon className={classes.avatarIcon} /></div>
  );
};

方法3：使用!important强制覆盖（应急可选，不推荐长期使用） #

如果是临时调试，也可以在样式规则后加!important强制提升优先级：

const useStyles = makeStyles({
  avatarIcon: {
    fontSize: '50rem !important',
  },
});

注意：你代码中使用的50rem是相对根元素字体大小的单位，若根元素默认字体为16px，对应实际尺寸为800px，尺寸不符合预期可自行调整单位或数值。

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