Cannot apply multi background color to material ui snackbar

3
votes

How to apply multi background color to material UI snackbar? I tried with linear-gradient as mentioned below but it doesn't work.

import Snackbar from 'material-ui/Snackbar';

const bodyStyle = {
  border: `2px solid ${config.actualWhite}`,
  minWidth: '50%',
  maxWidth: '100%',
  height:'55px',
  backgroundColor: 'linear-gradient(to right bottom, #00897B, #FFE082)',
  fontFamily: config.fontFamily,
  fontStyle: config.fontStyle,
  fontWeight: config.fontWeight,
  fontSize: config.fontSize
}

<Snackbar
   open={this.state.openLogout}
   message="You are Successfuly loggedout! Thanks for being part of web Family!"
   autoHideDuration={4000}
   bodyStyle={bodyStyle}
   action="Close"
   onRequestClose={this.handleRequestClose}
   onActionTouchTap={this.handleRequestClose}
   style={myTheme.snackbarfromTop}
/>

Snackbar screenshot

1
javascriptcssreactjsmaterial-uisnackbar
Changing backgroundColor to background with linear-gradient color worked for me. Attached snackbar image for ref. - Hemadri Dasari

1 Answers

1
votes

material-ui v0

You've got a slight error in your CSS. Specifically, backgroundColor should be background because the linear-gradient function returns an image, not a color. So, you should have:

const bodyStyle = {
  border: `2px solid ${config.actualWhite}`,
  minWidth: '50%',
  maxWidth: '100%',
  height:'55px',
  // Note the change to background here
  background: 'linear-gradient(to right bottom, #00897B, #FFE082)',
  fontFamily: config.fontFamily,
  fontStyle: config.fontStyle,
  fontWeight: config.fontWeight,
  fontSize: config.fontSize
}

Note that you should consider making the switch to the v1-beta, which should be promoted to the stable version sometime in early 2018. I describe the appropriate solution for that below.

material-ui v1

Changing the backgroundColor of a Snackbar works but will have no visible effect because the entire Snackbar is filled by one of it's children, SnackbarContent, and that child has it's background hardcoded in the source. By default, that backgroundColor is set to:

const backgroundColor = theme.palette.shades[reverseType].background.default;

So, what's happening is that your desired gradient background is being covered up by the child.

To fix this, you need to use the SnackbarContentProps described in the Snackbar API to override the backgroundColor in the child:

const styles = theme => ({
  myCustomBackground: {
    background: 'linear-gradient(to right bottom, #00897B, #FFE082)',
  },
});

<Snackbar
  SnackbarContentProps={{
    className: classes.myCustomBackground,
  }}
/>

The SnackbarContentProps are spread down to the child (visible on line 252 of the source as of December 2017), so everything you put in that object will become a prop to the SnackbarContent child. Here, you're setting the child's className property to myCustomBackground so that it will display your desired gradient instead of the default.

Here are a couple of other points to note:

  • I've left off all the other props and styling to keep the example as condensed as possible.
  • Gradient backgrounds must be set with the background CSS attribute instead of the backgroundColor attribute because gradients are images, not colors.