CODEWITHSUNDEEP
material-ui
Matt Hough
Matt Hough

Reputation: 1099

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.

enter image description here

Upvotes: 25

Views: 39721

Answers (3)

kenberkeley
kenberkeley

Reputation: 9766

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

Upvotes: 35

Mark Birbeck
Mark Birbeck

Reputation: 2993

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:

Upvotes: 2

Aniko Litvanyi
Aniko Litvanyi

Reputation: 2149

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

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

Upvotes: 66

Related Questions