can't change background color in theme Material-UI

user_10669558 0
Viewed 2490

I have been trying to define a custom theme using material UI and defining a default background colour for it. But the changes are not taking effect while other pallete 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.

Here's my code

theme.ts

import { createTheme } from '@mui/material';
import {red} from '@mui/material/colors';
const theme = createTheme({
  palette: {
    background: {
      default: '#FFD600',
      paper: '#FFD600',
    },
  },
});

export default theme;

my entry file

import '../styles/globals.css';
import {ThemeProvider} from "@mui/material/styles"
import theme from '../theme'
function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;

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. Here. 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

EDIT2: The component one worked because I defined paper colour, but I still cant get default to work

material-ui reactjs
1 Answers

So the reason it's still not working is that we need to import CssBaseline for it to work. CssBaseline implements background.default color according to the doc.

Here's how it'll work

import '../styles/globals.css';
import {ThemeProvider} from "@mui/material/styles"
import theme from '../theme'
import { CssBaseline } from '@mui/material/';

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline/>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;

Still weird how the paper property works but for default you need to import additional dependencies

user_106695580
Related