score:1

Accepted answer

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.


Related Query

More Query from same tag