未捕获的类型错误:theme.palette.common未定义

Question

我正在使用MUI。我有一个容器，里面有两个子组件，一个盒子和另一个容器。这是代码：

import { Button, Container } from "@mui/material";
import React from "react";
import {Box} from "@mui/systems"
import MovieCard from "./MovieCard";
const MovieList = () => {

return (
<Container>
<Box
sx={(theme) => ({
mb: theme.spacing(2),
width: "40vw",
mr: "auto",
ml: "auto",
bgcolor: theme.palette.common.white, // here is the problem!!!!!!!!!!!!!!
})}
>
<Button>Show Movies</Button>
</Box>
<Container
sx={(theme) => ({
width: "40vw",
border: "1px solid black",
borderRadius: theme.shape.borderRadius,
padding: theme.spacing(2),
bgcolor: theme.palette.common.white, // here the same line of code without problem
})}
>
<MovieCard />
<MovieCard />
<MovieCard />
</Container>
</Container>
)

如果我将该bgcolor添加到框sx道具；未捕获类型错误：theme.palette.common未定义"错误和一切崩溃。在Box组件下，我有一个容器，它有完全相同的bgcolor和相同的值，但没有错误。有人能解释一下这个问题吗？

Answer 1

如果从@mui/system而不是@mui/material导入Box，则它将无法访问@mui/material提供的完整默认主题，除非您通过ThemeProvider显式提供它。

theme.spacing(2)仍然有效，因为@mui/system提供了一个简单的默认主题，其中包括间距函数，但@mui/system中的默认调色板几乎是空的。