React 和 MUI：无法使用 makeStyles 设置 MUI 图标的样式答案

【问题标题】：React & MUI: Unable to style MUI Icon with makeStylesReact 和 MUI：无法使用 makeStyles 设置 MUI 图标的样式
【发布时间】：2022-01-01 20:51:33
【问题描述】：

我想使用 className 属性设置 mui 图标的样式，但是它不起作用。但是当我应用内联样式时，它会按预期工作。我将在组件中有一些图标，我想以相同的方式设置它们的样式，这就是为什么我不想使用内联样式并多次复制相同的代码。我究竟做错了什么？有人可以帮忙吗？

import React from 'react';
import FacebookIcon from '@mui/icons-material/Facebook';
import TwitterIcon from '@mui/icons-material/Twitter';
import { makeStyles } from '@mui/styles';

const useStyles = makeStyles({
    root: {
        fontSize: '50px',
        margin: '10px',
        color: 'primary'
    }
});

const Links = () => {

    const classes = useStyles();

    return(
        <div>
            //this doesn't work
            <TwitterIcon className={classes.root} />

            //this works
            <FacebookIcon sx= {{ fontSize:'50px', margin:'10px', color:'primary' }} />  
        </div>
    );
}

export default Links;

谢谢

【问题讨论】：

您可以使用 classes 属性来覆盖类。或者你需要更具体的类本身

标签： reactjs material-ui

【解决方案1】：

makeStyles 是依赖 JSS 的遗留 API，不是情感。除非您支持旧版本的 Mui，否则不应使用它。

推荐的方法是使用styled 或在theme 对象中指定变体。

import { styled } from '@mui/material'

const SocialMediaIcon = styled(Icon)(({ theme }) => ({
  fontSize: 50,
  margin: 10,
  color: theme.palette.text.primary,
}))

<SocialMediaIcon component={TwitterIcon} />

const theme = createTheme({
  components: {
    MuiIcon: {
      variants: [
        {
          props: { variant: 'social' },
          style: {
            fontSize: 50,
            margin: 10,
            color: 'primary',
          },
        },
      ],
    },
  },
})

<Icon variant="social" component={Instagram} />

Demo.

【讨论】：