本文介绍了MUI无法读取调色板值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正尝试在reactJS中使用带有MUI的TypeScript,但它一直出现此错误,我已尝试卸载MUI软件包,然后重新安装,但没有任何变化,因此很难判断为什么会发生此错误
TypeError: Cannot read properties of undefined (reading 'primary')
我有此MUI设置
我的主题配置
export type Mode = "dark" | "light";
declare module '@mui/material/styles' {
interface Palette {
general:{
purple: string,
grayLight: string,
linear: string,
white: string
}
}
interface PaletteOptions {
general?:{
purple: string,
grayLight: string,
linear: string,
white: string
}
}
}
export const themeConfig = (mode: Mode) => {
return {
palette: {
mode: mode,
primary: {
main: primMain,
dark: primDark,
light: primLight,
},
secondary: {
main: secMain,
dark: secDark,
light: secLight,
},
error: {
main: errorMain,
dark: errorDark,
},
success: {
main: successMain,
dark: sucessDark,
},
text: {
primary: textPrimary,
secondary: textSecondary,
},
general: {
purple: commonPurple,
grayLight: commonGrayLight,
linear: comminLinear,
white: commonWhite
},
},
};
};
创建主题初始化
import { createTheme} from '@mui/material/styles';
import {themeConfig} from '../styles/styleTheme'
const theme = createTheme(themeConfig('dark'))
使用makeStyles方法
import {makeStyles,createStyles } from '@mui/styles';
import { Theme } from '@mui/material/styles';
const useStyles = makeStyles((theme:Theme) => ({
root: {
backgroundColor: theme.palette.primary.dark,
},
}),
);
在组件中使用因此,当我使用这个(‘text.sub’)时,它工作得很好,但是当我使用这个(classes.root)时,它会抛出我上面提到的错误
import { Button } from '@mui/material';
import { ThemeProvider} from '@mui/material/styles';
const classes = useStyles();
<ThemeProvider theme={theme}>
<Button className={classes.root} sx={{color:'text.secondary'}}>style</Button>
</ThemeProvider>
我的反应组件
import React from 'react'
import {useTranslation} from 'react-i18next'
import { ThemeProvider} from '@mui/material/styles';
import {makeStyles,createStyles } from '@mui/styles';
import theme from './config/createTheme';
import {handleLangChange} from './services/changeLang'
import { Button } from '@mui/material';
import { Theme } from '@mui/material/styles';
const useStyles = makeStyles((theme:Theme) => ({
root: {
backgroundColor: theme.palette.primary.dark,
},
}),
);
function App() {
const {t} = useTranslation()
const classes = useStyles();
return (
<ThemeProvider theme={theme}>
<Button className={classes.root} sx={{color:'text.secondary'}}>style</Button>
</ThemeProvider>
);
}
export default App;
推荐答案
您调用useStyles
创建样式表并引用根组件中的theme
对象,在根组件中还返回ThemeProvider
以向下传递theme
,因此主题在那里不可用。若要修复此问题,请将useStyles
调用移动到子组件,在该子组件中它可以从父组件theme
访问theme
:
<ThemeProvider theme={theme}>
<Content />
</ThemeProvider>
const Content = () => {
const classes = useStyles();
return (
<Button className={classes.root} sx={{ color: 'text.secondary' }}>
style
</Button>
);
};
还要注意it's not recommended在v5中使用useStyles
/withStyles
,因为它们是不推荐使用的API。
编辑:您可以查看system section以了解更多详细信息。在v5中是这样的:
import MuiButton from '@mui/material/Button';
const Button = styled(MuiButton)(({ theme }) => ({
color: theme.palette.secondary.main,
}));
sx
道具:
<Button sx={{ color: 'secondary.main' }}
这篇关于MUI无法读取调色板值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!