React & MUI:无法使用makeStyles样式MUI图标

Question

我想使用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;

谢谢

Answer 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} />

演示。