MUI无法读取调色板值 [英] MUI can't read palette value

问题描述

我正尝试在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无法读取调色板值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！