I'm using MUI. I have a container and inside it I have two child components a Box and another container. here is the code:

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>
)

If I add that bgcolor to the box sx prop I get the "Uncaught TypeError: theme.palette.common is undefined" error and everything crashes. under the Box component, I have a container with exactly same bgcolor and same value but get no error. can someone please explain the problem?

CodePudding user response：

If you import Box from @mui/system instead of @mui/material, then it won't have access to the full default theme provided by @mui/material unless you explicitly provide it via ThemeProvider.

theme.spacing(2) still worked because @mui/system provides a simple default theme which includes the spacing function, but the default palette in @mui/system is nearly empty.

CodePudding user response：

<Container>
    <Box
      sx={(theme) => ({
        mb: theme.spacing(2),
        width: "40vw",
        mr: "auto",
        ml: "auto",
        backgroundColor: theme.palette.background.white 
      })}
    >
      <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>

Try this code . I hope this works .