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

<AppBar color="transparent" elevation={0}>

Answer 2

You can change its background color to transparent and remove the box-shadow this way:

<AppBar position="static"  style={{ background: 'transparent', boxShadow: 'none'}}>

Answer 3

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:

<div>
  <GlobalCss />
  <Router>
    .
    .
    .

The relevant parts of the documentation are:

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