使用 Material ui V.5 更改主题 - 编译错误导入样式

Question

我在使用 material ui 自定义主题方面需要帮助。它在样式组件中出现错误。我已经安装了以下内容： npm install @mui/material @emotion/react @emotion/styled - 并继续出现同样的错误。我正在使用 React 18 和 Material V.5 "@mui/material": "^5.6.3"

My code in hereenter image description here

我的名声，不允许嵌入图片。

enter image description here

import Notes from './pages/Notes';
import Bancos from './pages/Bancos';
import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import './App.css';
import { makeStyles } from '@mui/material';
import { styled } from '@mui/material/styles';
import { ThemeProvider } from '@material-ui/core/styles';
import { createMuiTheme } from '@/mui/material/styles';
import { purple } from '@mui/material/colors';

const theme = createMuiTheme({
  palette: {
    primary: {  
      main: '#fefefe',
    },
    secondary: {
      main: purple
    },
    typography: {
      fontFamily: 'Quicksand',
      fontWeigthLigth: 400,
      fontWeigthRegular: 500,
      fontWeigthMedium: 600,
      fontWeigthBold: 700,
    }
  }
})


class App extends React.Component{
    render(){
      return(
        <themeProvider theme={ theme }>
        <div>
          <BrowserRouter>
          <Switch>
            <Route exact path="/">
              <Notes />
              </Route>
              <Route path="/bancos">
                <Bancos />
              </Route>
          </Switch>
         </BrowserRouter>
        </div>
        </themeProvider>
      )
    }
};

export default App;

Answer 1

您的屏幕截图中显示的问题是由此导入中的拼写错误引起的：

import { createMuiTheme } from '@/mui/material/styles';

您在“@”后多了一个“/”。

请注意，createMuiTheme 已弃用，因此您可能希望改用 createTheme。

您似乎也在使用 MUI v5，在这种情况下，您需要从 @mui/material/styles (MUI v5) 导入 ThemeProvider 而不是 @material-ui/core/styles (Material-UI v4).

其他一些小问题：

palette.secondary.main 不接受颜色对象
fontWeigthLigth 打字错误
<themeProvider> 打字错误

我建议安装 linter 或其他可以轻松识别此类问题的工具。

使用 Material ui V.5 更改主题 - 编译错误导入样式

Changing Theme with Material ui V.5 - Compiling error Importing styles

themes

reactjs

material-ui