title: can't change background color in theme Material-UI
body: <p>I have been trying to define a custom theme using material UI and defining a <code>default</code> background colour for it. But the changes are not taking effect while other <code>pallete</code> options are working. Can anybody tell me what I'm doing wrong? As far as I can tell this is the way to change the colour.</p>
  <p>Here's my code</p>
  <p><code>theme.ts</code></p>
  <pre><code>import { createTheme } from '@mui/material';
  import {red} from '@mui/material/colors';
  const theme = createTheme({
    palette: {
      background: {
        default: '#FFD600',
        paper: '#FFD600',
      },
    },
  });
  
  export default theme;
  </code></pre>
  <p>my entry file</p>
  <pre><code>import '../styles/globals.css';
  import {ThemeProvider} from &quot;@mui/material/styles&quot;
  import theme from '../theme'
  function MyApp({ Component, pageProps }) {
    return (
      &lt;ThemeProvider theme={theme}&gt;
        &lt;Component {...pageProps} /&gt;
      &lt;/ThemeProvider&gt;
    );
  }
  
  export default MyApp;
  </code></pre>
  <p>EDIT: It seems to be changing the background for the components I have used with material-UI but not for other components I may define.
  e.g. <a href="https://imgur.com/a/ss1iqyT" rel="nofollow noreferrer">Here</a>. I used the card component of MUI and the background was changed but I need it to change the background colour of the whole page</p>
  <p>EDIT2: The component one worked because I defined paper colour, but I still cant get <code>default</code> to work</p>