無法為 mui 組件使用自定義調色板

Question

我試圖將背景顏色設為午夜藍色，但出現錯誤：

類型錯誤：無法讀取未定義的屬性（讀取“100”）

檢查語法后，我無法發現任何錯誤。 這似乎是我在想的依賴問題？

提前致謝

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;

Answer 1

於是我去查了一下，你的導入是錯誤的，應該是這樣的

import { ThemeProvider, createTheme } from "@mui/material/styles";

Answer 2

你的導入不正確。 它應該是：

import { createTheme, ThemeProvider } from "@mui/material" 

提示：有時在自動導入時，某些組件會從“@mui/system”導入，這會導致此類問題，大多數情況下，從“@mui/material”命名的導入就足夠了。