如何将多背景色应用到 Material UI snackbar?我尝试使用下面提到的线性渐变,但它不起作用。
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}
/>
最佳答案
Material 用户界面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 用户界面v1
更改 Snackbar
的 backgroundColor
有效,但不会有明显的效果,因为整个 Snackbar
都被它的一个子项填充了,SnackbarContent
,那个 child 有它的背景 hardcoded in the source .默认情况下,backgroundColor 设置为:
const backgroundColor = theme.palette.shades[reverseType].background.default;
所以,实际情况是您想要的渐变背景被 child 遮盖了。
要解决此问题,您需要使用 SnackbarContentProps
描述 in the Snackbar
API覆盖子项中的 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
child 。在这里,您将 child 的 className
属性设置为 myCustomBackground
,以便它显示您想要的渐变而不是默认渐变。
这里有几点需要注意:
- 我省略了所有其他 Prop 和样式,以使示例尽可能简洁。
- 必须使用
background
CSS 属性而不是backgroundColor
属性设置渐变背景,因为渐变是图像,而不是颜色。
关于javascript - 无法将多背景颜色应用于 Material ui snackbar ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48042495/