Блог

Я пытаюсь сделать цвет фона темно-синим, и я получаю ошибку:

Ошибка типа: Не удается прочитать свойства неопределенного (значение «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 = () =gt; {  const theme = createTheme({  palette: {  background: {  midnightBlue: "#0A1929"  }  },  });   return (  lt;ThemeProvider theme={theme}gt;  lt;Box sx={{ flexGrow: 1, bgColor: "background.midnightBlue"}}gt;  lt;AppBar position="static"gt;  lt;Toolbargt;  lt;Typography variant="h6" component="div" sx={{ flexGrow: 1 }}gt;  Name  lt;/Typographygt;  lt;Button color="inherit"gt;Link 1lt;/Buttongt;  lt;Button color="inherit"gt;Link 2lt;/Buttongt;  lt;Button color="inherit"gt;Link 3lt;/Buttongt;  lt;Button color="inherit"gt;Link 4lt;/Buttongt;  lt;/Toolbargt;  lt;/AppBargt;  lt;/Boxgt;  lt;/ThemeProvidergt;  ); };  export default Navbar;   

Поэтому я пошел и проверил, и ваш импорт неверен, он должен быть таким

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

Ваш импорт неверен. Это должно быть:

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

Совет: Иногда при автоматическом импорте некоторые компоненты импортируются из «@mui/system», что приводит к таким проблемам, в большинстве случаев достаточно именованного импорта из «@mui/material».