I'm trying to get the background colour to be the midnightBlue, and i'm getting an error:
TypeError: Cannot read properties of undefined (reading '100')
After checking the syntax, I can't catch any errors. This seems to be a dependancy issue i'm thinking?
Thanks in advance
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import { ThemeProvider, createTheme } from "@mui/system";
const Navbar = () => {
const theme = createTheme({
palette: {
background: {
midnightBlue: "#0A1929"
}
},
});
return (
<ThemeProvider theme={theme}>
<Box sx={{ flexGrow: 1, bgColor: "background.midnightBlue"}}>
<AppBar position="static">
<Toolbar>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
Name
</Typography>
<Button color="inherit">Link 1</Button>
<Button color="inherit">Link 2</Button>
<Button color="inherit">Link 3</Button>
<Button color="inherit">Link 4</Button>
</Toolbar>
</AppBar>
</Box>
</ThemeProvider>
);
};
export default Navbar;
于是我去查了一下,你的导入是错误的,应该是这样的
import { ThemeProvider, createTheme } from "@mui/material/styles";
You're import is incorrect. It should be:
import { createTheme, ThemeProvider } from "@mui/material"
Tip: Sometimes when you auto import, some components get imported from "@mui/system" which leads to such issues, most of the time named import from "@mui/material" will suffice.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.