Transparent AppBar in material-ui (React)

问题

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 the opacity property, but that reduces the opacity of everything within the component it seems.

Below is an example of what I mean on Stripe's website.

回答1:

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

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

回答2:

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.

来源：https://stackoverflow.com/questions/50117231/transparent-appbar-in-material-ui-react