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

Question

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

我的密码在这里在这里输入图像描述

我的名声，不允许做盗用形象。

在这里输入图像描述

​

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。

在这种情况下，您还需要从v5 (MUI v5)导入ThemeProvider，而不是从@material-ui/core/styles (Material UI v4)导入。

其他一些次要问题：

• palette.secondary.main不接受彩色对象
• fontWeigthLigth错误
• <themeProvider>错误

我建议安装一个链接器或其他工具，这些工具可以很容易地识别这样的问题。