无法覆盖默认的 Material UI 图标样式答案

【问题标题】：Cannot override default Material UI Icon styling无法覆盖默认的 Material UI 图标样式
【发布时间】：2021-09-15 19:18:17
【问题描述】：

我有一个AccountCircleIcon Material UI 图标，我想增加尺寸，我尝试了几件事：

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

const StyledIcon = withStyles({
  root: {
    fontSize: '50rem',
  },
})(AccountCircleIcon);

const login = () => {
  return (
    <div><StyledIcon /></div>
  );
};

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

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

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

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>
  );
};

但每次默认图标样式都会覆盖添加的样式：

【问题讨论】：

它使用版本4.12.3 工作。您使用的是哪个版本的material-ui？
刚刚在代码框codesandbox.io/s/intelligent-dewdney-1t832?file=/package.json 中重新创建了这个问题，它可以工作，但在较新的版本上它没有。这似乎是一个版本问题。要去他们的Github上报告，可能是我一起使用了错误的包。
您的沙盒运行良好。
@Hamidreza 抱歉，我的意思是在那些版本上它可以工作，但是如果你将包升级到下一个版本，样式就会开始中断。

标签： material-ui

【解决方案1】：

我错过了将 StyledEngineProvider https://mui.com/guides/interoperability/ 包裹在您的应用周围以确保首先注入自定义 css：

import * as React from 'react';
import { StyledEngineProvider } from '@mui/material/styles';

export default function GlobalCssPriority() {
  return (
    <StyledEngineProvider injectFirst>
      {/* Your component tree. Now you can override MUI's styles. */}
    </StyledEngineProvider>
  );
}

https://codesandbox.io/s/laughing-alex-nyszr?file=/src/Demo.tsx

【讨论】：