Default props in theme configuration seems not to work

Question

it's the first time I'm using Material UI and I'm having some problems using createTheme.

My goal is to remove the horizontal padding for each Container so I decided to put this configuration in the theme file:

import { createTheme } from "@mui/material/styles";
import "@fontsource/roboto";

export const COLORS = {
  beige: "#bfafae",
  white: "#FFFFFF"
};

const { beige, white } = COLORS;

const palette = {
  primary: { main: beige },
  common: { white: white }
};

const theme = createTheme({
  typography: {
    fontFamily: ["Noto Sans", "Arial", "sans-serif"].join(","),
    fontSize: 16
  },
  palette,
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 900,
      lg: 1200,
      xl: 1536
    }
  },
  components: {
    MuiContainer: {
      defaultProps: {
        disableGutters: true
      },
      styleOverrides: {
        root: {
          backgroundColor: beige,
          paddingLeft: 0,
          paddingRight: 0
        }
      }
    }
  }
});

export default theme;

I use it in this way:

export default function App() {
  return (
    <Container sx={{ height: "100%", minHeight: "100vh" }}>
      <Container maxWidth="sm" sx={{ border: "1px solid red" }}>
        app
      </Container>
    </Container>
  );
}

Result:

Instead, if I set disableGutters in the components, it works:

export default function App() {
  return (
    <Container disableGutters sx={{ height: "100%", minHeight: "100vh" }}>
      <Container disableGutters maxWidth="sm" sx={{ border: "1px solid red" }}>
        app
      </Container>
    </Container>
  );
}

Result:

I'm using Typescript but it's the same without it.

What I'm wrong?

---

index.js:

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>
);

Answer 1

add CssBaseline component, it is a collection of CSS reset styles.

import { CssBaseline } from '@mui/material'
import { ThemeProvider } from '@mui/material/styles'


const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
  <ThemeProvider theme={theme}>
    <CssBaseline />
    <App />
  </ThemeProvider>
);

Answer 2

When you are creating the theme, your palette is not being read write, and everything after it doesn't work as well, it should be something like:

const theme = createTheme({
typography: {
    fontFamily: ["Noto Sans", "Arial", "sans-serif"].join(","),
    fontSize: 16
  },
  **palette: palette,**
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 900,
      lg: 1200,
      xl: 1536
    }
  },