如何解决使用 makeStyles 的 Material-UI 覆盖样式
我正在从事一个基于设计的项目。我使用过的某些 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 举报,一经查实,本站将立刻删除。