使用 makeStyles 覆盖 Material-UI 样式

Question

我正在开发一个小型作品集网站，我添加了一个头像，并尝试使用 makeStyles 类覆盖它的样式，但 Mui 头像根覆盖了我的类，

不使用 !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)
    },
}))

Answer 1

根据docs，您可以使用classes 属性覆盖root 类的css 样式，例如：

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)
    },
}))