使用 makeStyles 的 Material-UI 覆盖样式

编程问答 2022-05-15

问题描述

我正在从事一个基于设计的项目。我使用过的某些 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

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

makestylesmaterial-uioverridingreactjsreactjsreactjsreactjsthemeprovider