React & MUI：无法使用 makeStyles 设置 MUI 图标样式

Question

I want to style mui Icons using className attribute, however it doesn't work. But when I'm applying inline styles it works as expected. I will have a few Icons in the component which I want to style the same way that's why I don't want to use inline styles and copy the same code several times. What am I doing wrong? Can someone please help?

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;

Thank you

Answer 1

makeStyles is legacy API that relies on JSS, not emotion. It should not be used unless you are supporting older versions of Mui.

The recommended way is to either use styled or specify variants in the theme object.

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.