Transparent AppBar in material-ui (React)

Question

Is there a way to change the background property of my material-ui AppBar component to transparent without having to actually change the CSS?

I\'ve tried th

Answer 1

The inline styles do the trick, so thanks for that. But I felt a little uncomfortable with the approach since we wouldn't normally use inline styles--with or without React.

I delved a little deeper to try to find something that fits more with the framework, and this is what I came up with.

// in App.js
const GlobalCss = withStyles({
  '@global': {
    '.MuiAppBar-root': {
      background: 'transparent',
      boxShadow: 'none'
    }
  }
})(() => null)

The tag then needs to be inserted into the markup, which for me is:

  
  
    .
    .
    .

The relevant parts of the documentation are:

• CSS rules to override, at AppBar API > CSS;
• setting global CSS, at Global CSS override.