无法将多种背景颜色应用于材料ui snackbar

Question

如何将多种背景颜色应用于素材UI快餐栏？我尝试使用如下所述的线性渐变，但它不起作用。

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

Answer 1

material-ui v0

你的CSS中有轻微的错误。具体来说，backgroundColor应为background，因为linear-gradient函数会返回图像，而不是颜色。所以，你应该：

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
}

请注意，您应该考虑切换到v1-beta，应该将其提升为stable version sometime in early 2018。我将在下面描述适当的解决方案。

material-ui v1

更改backgroundColor的{​​{1}}有效但效果不明显，因为整个Snackbar由其中一个孩子Snackbar填充，并且该孩子有这是背景hardcoded in the source。默认情况下，backgroundColor设置为：

SnackbarContent

所以，正在发生的事情是孩子正在掩盖你想要的渐变背景。

要解决此问题，您需要使用const backgroundColor = theme.palette.shades[reverseType].background.default; 描述的in the Snackbar API覆盖孩子中的SnackbarContentProps：

backgroundColor

const styles = theme => ({ myCustomBackground: { background: 'linear-gradient(to right bottom, #00897B, #FFE082)', }, }); <Snackbar SnackbarContentProps={{ className: classes.myCustomBackground, }} /> 分散到孩子身上（截至2017年12月在line 252 of the source上可见），因此您放入该对象的所有内容都将成为SnackbarContentProps孩子的道具。在这里，您要将孩子的SnackbarContent属性设置为className，以便它显示所需的渐变而不是默认的渐变。

以下几点需要注意：

• 我已经停止了所有其他道具和造型，以保持示例尽可能浓缩。
• 必须使用myCustomBackground CSS属性而不是background属性设置渐变背景，因为渐变是图像，而不是颜色。