使用 Material ui V.5 更改主题 - 编译错误导入样式
Changing Theme with Material ui V.5 - Compiling error Importing styles
我在使用 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;
您的屏幕截图中显示的问题是由此导入中的拼写错误引起的:
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 自定义主题方面需要帮助。它在样式组件中出现错误。 我已经安装了以下内容: 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;
您的屏幕截图中显示的问题是由此导入中的拼写错误引起的:
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 或其他可以轻松识别此类问题的工具。