无法将多背景颜色应用于 material ui 小吃店

Question

如何将多背景色应用于 material 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 函数 returns 图像，而不是颜色。所以，你应该：

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

更改 Snackbar 的 backgroundColor 有效，但不会有明显的效果，因为整个 Snackbar 被其中一个 children 填充，SnackbarContent，并且 child 有它的背景 hardcoded in the source。默认情况下，backgroundColor 设置为：

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

所以，您想要的渐变背景被 child 覆盖了。

要解决此问题，您需要使用 in the Snackbar API 中描述的 SnackbarContentProps 覆盖 child 中的 backgroundColor:

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

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

SnackbarContentProps 分布到 child（截至 2017 年 12 月在 line 252 of the source 可见），因此您放入 object 的所有内容都将成为道具到 SnackbarContent child。在这里，您将 child 的 className 属性设置为 myCustomBackground，这样它将显示您想要的渐变而不是默认渐变。

这里有几点需要注意：

我省略了所有其他道具和样式，以使示例尽可能简洁。
必须使用 background CSS 属性而不是 backgroundColor 属性设置渐变背景，因为渐变是图像，而不是颜色。

无法将多背景颜色应用于 material ui 小吃店

Cannot apply multi background color to material ui snackbar

javascript

css

reactjs

snackbar

material-ui

material-ui v0

material-ui v1