Material-ui: Cannot change the body background via theme configuration

[mnemanja]

A question / suggestion or a potential bug.

I'm trying to configure a theme and when I try to change the background color the change does not get applied.

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

With this theme configuration, I'm expecting the body background color to be #ff0000 but it's actually #cccccc.

export default {
  palette: {
    type: 'light',
    primary: {
      main: '#00AAE1',
      dark: '#143C8C',
      contrastText: '#fff',
    },
    secondary: {
      main: '#64B42D',
      dark: '#008732',
      contrastText: '#fff',
    },
    error: {
      main: '#BD0043',
      contrastText: '#fff',
    },
    divider: '#D7D6D5',
    background: {
      paper: '#fff',
      default: "#ff0000"
    },
  },

  typography: {
    // Use the system font over Roboto.
    fontFamily: 'Avenir Next, Roboto,"Helvetica Neue",Arial,sans-serif',
    htmlFontSize: 16,
  },
};

const theme = createMuiTheme(uiThemeConfig);

Current Behavior

The body's background color remains unchanged.

Steps to Reproduce (for bugs)

I found that having the <CssBaseline /> makes the background color possible.
https://codesandbox.io/s/kkpw0y1vm5

But without it doesn't work.
https://codesandbox.io/s/q4kvw1kj4q

I must have missed this in the documentation to be a mandatory part of the setup. If so, then please point me to it :)

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI |1.0.0-beta.38|
| React |16.2.0|

[oliviertassinari]

I found that having the makes the background color possible.
https://codesandbox.io/s/kkpw0y1vm5

But without it doesn't work.
https://codesandbox.io/s/q4kvw1kj4q

I must have missed this in the documentation to be a mandatory part of the setup. If so, then please point me to it :)

I'm trying to configure a theme and when I try to change the background color the change does not get applied.

@mnemanja It's CssBaseline responsibility to change the background color of the page. This component applies side effects. What you are describing sounds like the expected output. I'm not sure how we could improve the situation. Any idea?

[mnemanja]

@oliviertassinari thanks for the awesomely quick response! 👍

Just adding it to the documentation as an expectation would be fine I'd say :)

[oliviertassinari]

For reference, the CssBaseline documentation page.

[mnemanja]

I would suggest a link with a description that the CssBaseline is needed in certain situation (for example changing a body's background color) here https://material-ui-next.com/customization/themes/

[oliviertassinari]

I have made some changes. I hope it's clearer. The theme page is already very dense. I want to offload as much information as possible to keep the important part. Thanks for raising the concern.

[mnemanja]

Well done sir :)

[HebaruSan]

Is this stuff still applicable? I tried following the CSSBaseline page, and my dev tools say:

Uncaught Error: Cannot find module '@material-ui/core/CssBaseline

I probably don't understand something about the syntax. Why is there an @ symbol there when most of the other import statements I've seen so far don't have one?

EDIT: OK, so that's not syntax, it's part of the name of the package. A separate package from regular material-ui. Or does one replace the other? Is this a private implementation that I'm not supposed to be using? What's the significance of this package name? And why is it still not setting the page background?

const App = () => (
    <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
    <React.Fragment>
    <CssBaseline />
    <Paper>
    <div>
    <AppBar title="CKAN"/>
    Hi there!
    </div>
    </Paper>
    </React.Fragment>
    </MuiThemeProvider>
);

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

[oliviertassinari]

@HebaruSan Upgrade to v1.

[HebaruSan]

I simply ran "npm install material-ui". Why wouldn't I have the latest version after that?

[oliviertassinari]

@HebaruSan The main package was moved to @material-ui/core.

[HebaruSan]

Well that isn't going to confuse anyone!!

Seriously though, is that going to be fixed? Is there at least an issue tracking it? Getting an old version when we install the name of your project (and only finding out that happened later when asking questions on GitHub) is pretty much the opposite of the principle of least surprise.

[oliviertassinari]

@HebaruSan I have added a deprecation warning on the latest and next tag of the material-ui package:

You can now upgrade to @material-ui/core.

[oliviertassinari]

https://github.com/mui-org/material-ui#installation

[HebaruSan]

Meanwhile pages like this still have the old version:

https://v0.material-ui.com/#/customization/themes

Where did the theme stuff move to?

[oliviertassinari]

Meanwhile pages like this still have the old version:

@HebaruSan I don't understand.

[HebaruSan]

import React from 'react';
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import AppBar from 'material-ui/AppBar';

No @ symbols there.

[oliviertassinari]

[nik-john]

I ran into this issue and eventually realized that I was wrapping <CssBaseline> around the <MuiThemeProvider> and not the other way around. This was causing <CssBaseline> to not be aware of the theme configuration.

KO 🔴

<CssBaseline>
  <MuiThemeProvider theme={muiTheme}>
    <App />
  </MuiThemeProvider>
</CssBaseline>

OK ✅

<MuiThemeProvider theme={muiTheme}>
  <CssBaseline />
  <App />
</MuiThemeProvider>

[loleondiou]

Without this issue, I don't think I would have found out why the background was not being set. I know you said that you don't want this page https://material-ui.com/customization/themes/ to be too dense, but I think that the example: ...

import React from 'react';
import { render } from 'react-dom';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import Root from './Root';

const theme = createMuiTheme();

function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <Root />
    </MuiThemeProvider>
  );
}

render(<App />, document.querySelector('#app'));

... must include CssBaseline in it, especially if it is required for the theme to work correctly with the background and whatever else it might do. Great work other wise.

[oliviertassinari]

@loleondiou We have the component documented right at the beginning: https://material-ui.com/getting-started/usage/#cssbaseline.

[loleondiou]

Hi @oliviertassinari . Thanks for the response.

CssBaseline
Material-UI provides an optional CssBaseline component. It's fixing some inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

So my issue is that the muiTheme isn't being applied in it's entirety without CssBaseline which the provided definition doesn't suggest is the case. If it truly is optional all theming would work with or without CssBaseline, in my opinion anyway.

[chayakornwc]

When i use ThemeProvider Higher CssBaseline and Override theme.overrides.body

children:
null
theme:
{…}
breakpoints:
{…}
direction:
"ltr"
mixins:
{…}
overrides:
{…}
MuiCssBaseline:
{…}
body:
{…}
background:
"#fff!important"

how to override body background-color

[joshwooding]

@chayakornwc

palette: {
  background: {
    default: '#fff'
  }
}

The theme structure can be found here: https://material-ui.com/customization/default-theme/

[chayakornwc]

@chayakornwc

palette: {
  background: {
    default: '#fff'
  }
}

The theme structure can be found here: https://material-ui.com/customization/default-theme/

I did solving about that solution. that's not work :(

[joshwooding]

@chayakornwc CSSBaseline needs to be inside the ThemeProvider. If you still can't get it to work if you create a StackOverflow question with a reproducible example, I'd be happy to have a look.

[chayakornwc]

@chayakornwc CSSBaseline needs to be inside the ThemeProvider. If you still can't get it to work if you create a StackOverflow question with a reproducible example, I'd be happy to have a look.

Thanks!