使用 makeStyles 的 Material-UI 覆盖样式

Question

我正在从事一个基于设计的项目。我使用过的某些 Material-UI 组件附带了内置样式。我找到了一种使用 createMuiTheme 和 ThemeProvider 覆盖内置样式的方法，但是我在这个项目中的领导希望我们将所有样式保留在 Material-UI 的 makeStyles (useStyles) 部分下。我的问题是，有没有办法使用 makeStyles 来覆盖我用 createMuiTheme 覆盖的样式？

这是我在其中使用 ThemeProvider 的导航组件：

import {
    AppBar,
    Toolbar,
    List,
    ListItem,
    ListItemText,
    Container,
    Hidden,
} from '@material-ui/core'
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'
import Logo from '../../assets/images/platform-logo.svg'
import artistPaintBackground from '../../assets/images/navigation-artists.svg'
import eventsPaintBackground from '../../assets/images/navigation-events.svg'
import contactUsPaintBackground from '../../assets/images/navigation-contact-us.png'
import homePaintBackground from '../../assets/images/navigation-home.png'
import useStyles from './styles'

const navLinks = [
    {
        id: 0,
        title: `HOME`,
        path: `/`,
        bgI: `${homePaintBackground}`,
    },
    {
        id: 1,
        title: 'EVENTS',
        path: '/events',
        bgI: `${eventsPaintBackground}`,
    },
    {
        id: 2,
        title: `ARTISTS`,
        path: `/artists`,
        bgI: `${artistPaintBackground}`,
    },
    {
        id: 3,
        title: `CONTACT US`,
        path: `/contactUs`,
        bgI: `${contactUsPaintBackground}`,
    },
]

const theme = createMuiTheme({
    overrides: {
        MuiTypography: {
            body1: {
                fontWeight: 'bold',
                fontSize: '12px',
                textAlign: 'center',
            },
        },
    },
})

const Nav = () => {
    const classes = useStyles()
    return (
        <div>
            <AppBar position='static' className={classes.navBar}>
                <Toolbar>
                    <Container maxWidth='xl' className={classes.navDisplayFlex}>
                        <Link to='/'>
                            <img className={classes.imageLogo} src={Logo} />
                        </Link>
                        <Hidden smDown>
                            <ThemeProvider theme={theme}>
                                <List
                                    component='nav'
                                    aria-labelledby='main-navigation'
                                    className={classes.navDisplayFlex}
                                >
                                    {navLinks.map(({ title, path, id, bgI }) => (
                                        <NavLink
                                            exact
                                            to={path}
                                            key={id}
                                            className={classes.linkText}
                                            activeStyle={{
                                                backgroundImage: `url(${bgI})`,
                                                backgroundSize: 'cover',
                                                backgroundRepeat: 'no-repeat',
                                                color: 'white',
                                                paddingTop: '18px',
                                                margin: '-8px 0 -8px 0',
                                            }}
                                        >
                                            <ListItem disableGutters={true}>
                                                <ListItemText primary={title} />
                                            </ListItem>
                                        </NavLink>
                                    ))}
                                </List>
                            </ThemeProvider>
                        </Hidden>
                    </Container>
                </Toolbar>
            </AppBar>
        </div>
    )
}

export default Nav

这是我使用 makeStyles 的样式文件夹：

import { makeStyles } from '@material-ui/core'

const useStyles = makeStyles({
    navBar: {
        backgroundColor: 'white',
    },
    navDisplayFlex: {
        display: 'flex',
        justifyContent: 'space-between',
        backgroundColor: 'white',
    },
    linkText: {
        textDecoration: 'none',
        textTransform: 'uppercase',
        color: 'black',
        fontWeight: 'bold',
        paddingTop: '10px',
    },
    imageLogo: {
        width: '40%',
        margin: '20px 0px 10px 0px',
    },
})

export default useStyles

感谢您在此主题上提供的任何帮助，我已经搜索并搜索过，但似乎找不到好的解决方案。