Overring Material-UI style with makeStyles

user_13439438 0
Viewed 84

I am working on a small portfolio website, I've added an avatar, and trying to override it's style with makeStyles class, tho the Mui avatar root is overriding my class,

is this possible to do without the use of !important ?

export const HomePage = () => {
    const classes = useStyles()
    return (
        <Grid container justifyContent="center">
            <Avatar className={classes.headerAvatar} src={avatar} alt="" />
        </Grid>
    )
}


export const useStyles = makeStyles(theme => ({
headerAvatar: {
        width: theme.spacing(13),
        height: theme.spacing(13),
        margin: theme.spacing(1)
    },
}))
material-ui reactjs css
1 Answers

According to the docs, you can override the css style of the root class using the classes prop, like:

export const HomePage = () => {
    const classes = useStyles()
    return (
        <Grid container justifyContent="center">
            <Avatar classes={classes} src={avatar} alt="" />
        </Grid>
    )
}


export const useStyles = makeStyles(theme => ({
  root: {
        width: theme.spacing(13),
        height: theme.spacing(13),
        margin: theme.spacing(1)
    },
}))
user_1393000
Related