无法将多背景颜色应用于材质 ui 快餐栏

Posted 2023-02-23

【中文标题】无法将多背景颜色应用于材质 ui 快餐栏

【英文标题】：Cannot apply multi background color to material ui snackbar

【发布时间】：2018-06-11 01:38:52

【问题描述】：

如何将多背景颜色应用于材质 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

【问题讨论】：

将 backgroundColor 更改为具有线性渐变颜色的背景对我有用。附上参考的小吃店图片。

【参考方案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

更改Snackbar 的backgroundColor 有效，但不会产生明显效果，因为整个Snackbar 由它的一个孩子SnackbarContent 填充，而那个孩子有它的背景hardcoded in the source。默认情况下， backgroundColor 设置为：

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,
  
/>

SnackbarContentProps 向下传播到孩子（截至 2017 年 12 月在 line 252 of the source 上可见），因此您放入该对象的所有内容都将成为 SnackbarContent 孩子的道具。在这里，您将孩子的className 属性设置为myCustomBackground，以便它显示您想要的渐变而不是默认渐变。

还有几点需要注意：

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

【讨论】：

感谢您的宝贵时间。我申请的方式和你上面提到的一样，但它对我不起作用。我正在使用 material-ui 版本 0.18.7。但你的回答对我有帮助。我在 bodyStyle 中将 backgroundColor 更改为带有线性渐变颜色的背景。它现在工作得很好。谢谢

哦，好吧，我没有意识到你没有使用 material-ui@next。给我一分钟更新我的答案。

另外，你真的应该考虑升级到下一个版本（v1-beta），与当前版本相比，它有很多改进（和重大更改）。

谢谢:) 是的，我必须更新才能使用 material-ui@next 中引入的令人难以置信的改进。