Material-ui: Optional backgroundColor with CssBaseline

Created on 25 Aug 2018 · 11Comments · Source: mui-org/material-ui

Make it easy to turn off the backgroundColor setting when using CssBaseline with just a single boolean prop.

Everything else CssBaseline does is very sensible, but if I'm embedding my app in a page with some other color scheme going on, overriding the backgroundColor can be problematic.

CssBaseline question

Source

resistdesign

Most helpful comment

changing the CssBaseline CSS with theme.overrides.MuiCssBaseline.body

For others that are as lost as I am, the above means:

const theme = createMuiTheme({
  overrides: {
    MuiCssBaseline: {
      '@global': {
        body: {
          backgroundColor: '#ff00ff',
        },
      },
    },
  },
})

skube on 9 Sep 2019

❤22 👍8

All 11 comments

backgroundColor comes from the theme:

body: {
      margin: 0, // Remove the margin in all browsers.
      backgroundColor: theme.palette.background.default,
      '@media print': {
        // Save printer ink.
        backgroundColor: theme.palette.common.white,
      },
},

You can either override it there, or you can override it using the classes key.

mbrookes on 25 Aug 2018

@mbrookes Is right, nothing prevents you from overriding the background color either by:

changing the theme color variable : theme.palette.background.default
changing the CssBaseline CSS with theme.overrides.MuiCssBaseline.body
overriding the CssBaseline CSS with a custom style of higher specificity.

Let us know what solution you pick :).

oliviertassinari on 25 Aug 2018

👎1 👍1

I'm not even using a theme and this is convoluted compared to a simple boolean prop. The feature request was for simplicity.

Also, what does "changing the CssBaseline CSS with theme.overrides.MuiCssBaseline.body" mean? How would that be done?

resistdesign on 25 Aug 2018

The feature request was for simplicity.

The simplest approach is to add some custom CSS:

body {
  background-color: green;
}

what does "changing the CssBaseline CSS with theme.overrides.MuiCssBaseline.body" mean?

https://material-ui.com/customization/themes/#customizing-all-instances-of-a-component-type

oliviertassinari on 25 Aug 2018

@oliviertassinari Thank you for taking the time to put together this reply, this is very helpful :)

resistdesign on 26 Aug 2018

changing the CssBaseline CSS with theme.overrides.MuiCssBaseline.body

For others that are as lost as I am, the above means:

const theme = createMuiTheme({
  overrides: {
    MuiCssBaseline: {
      '@global': {
        body: {
          backgroundColor: '#ff00ff',
        },
      },
    },
  },
})

skube on 9 Sep 2019

❤22 👍8

It is possible to disable all styles from MuiCssBaseline?

khasky on 21 Jan 2020

For anyone else how finds this: My issue was that I did not have the <CssBaseline /> nested inside the <ThemeProvider>.

https://stackoverflow.com/questions/48186478/custom-theme-background-color

bzmillerboy on 29 Jan 2020

👍7 🎉3 😄2

Hey @oliviertassinari, how to change body background color with material UI theme only for few pages. I have tried to add like the below code but it applied to all the pages. Thanks

"@global": { body: { backgroundColor: theme.palette.background } },

devevignesh on 5 Aug 2020

@devevignesh This is a question for stack overflow. You could conditionally mount a component that overrides the <body> style.

oliviertassinari on 5 Aug 2020

👍1

I built myself a small component which injects backgroundColor into the body element:

// file: Body.tsx
import * as React from 'react'
import * as MUI from '@material-ui/core'
import { compose, palette } from '@material-ui/system'

interface Props {
  bgcolor?: string
  children?: React.ReactNode
}

export default MUI.withStyles<any, any, Props>(
  (theme) => ({
    '@global': {
      body: (props) => compose(palette)({ theme, ...props } as unknown),
    },
  }),
  {
    name: 'Body',
  },
)(({ children }) => <>{children}</>)

And I'm using it like this:

export default function Page() {
  return (
    <Body bgcolor="primary.main">
      <div>…</div>
    </Body>
  )
}

(or I can use inline colors, eg. <Body bgcolor="#F8F8F8">)

However I'm not quite happy with using just body selector as that relies on CSS source order to override the default background color from CssBaseline. I tried to use html > body to increase the specificity, but then the style is not removed when the component is unmounted (which I consider a bug). So I either have the choice of living with this danger (of relying on CSS source order), or somehow try to insert !important into the generated style, or find another way to increase specificity (I tried body.body but that didn't work, and I didn't spend too much time investigating into this direction).

btw the … as unknown is necessary to silence TypeScript, and inserting the theme into the compose/palette function argument is necessary to avoid a warning (You are calling a style function without a theme value). I'm not sure if I'm doing something wrong, in both cases the color is being applied correctly.