如何将多种背景颜色应用于材质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}
/>
您的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。我将在下面描述适当的解决方案。
改变backgroundColor
的Snackbar
工作,但没有明显的效果,因为整个Snackbar
由其中一个孩子,SnackbarContent
填充,并且那个孩子有它的背景hardcoded in the source。默认情况下,backgroundColor设置为:
const backgroundColor = theme.palette.shades[reverseType].background.default;
所以,正在发生的事情是孩子正在掩盖你想要的渐变背景。
要解决这个问题,你需要使用描述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
孩子的道具。在这里,您将孩子的className
属性设置为myCustomBackground
,以便它显示所需的渐变而不是默认的渐变。
以下是其他几点需要注意的事项:
background
CSS属性而不是backgroundColor
属性设置渐变背景,因为渐变是图像,而不是颜色。