マテリアルUIスナックバーに複数の背景色を適用できません

Question

マテリアルUIスナックバーに複数の背景色を適用するにはどうすればよいですか？私は以下に述べるように線形勾配で試しましたが、うまくいきません。あなたのCSSに若干の誤差を持っている

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

材料-UI V0

。具体的にはbackgroundColorはlinear-gradient関数が色ではなく画像を返すため、backgroundにする必要があります。だから、あなたが持っている必要があります：あなたはstable version sometime in early 2018に推進すべきであるV1-β、への切り替えを行うことを検討すべきである

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 
} 

注意を。私は以下のことについて適切な解決策を説明します。

Snackbar作品の backgroundColorを変更

材料-UI V1

が、全体Snackbarはそれの1人の子供、SnackbarContentだし、その子は、それがバックグラウンドhardcoded in the sourceのしていることで満たされているので、目に見える効果がありません。デフォルトでは、backgroundColorのがに設定されていること：だから

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

、何が起こっていることは、ご希望のグラデーションの背景には、子供によって隠蔽されていることです。そう、

SnackbarContentPropsが子供にまで広がっている

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が子供でbackgroundColorを上書きするin the Snackbar APIを説明使用する必要がありますあなたがそのオブジェクトに入れたものはすべてSnackbarContent子どもの支柱になります。ここでは、子供のclassNameプロパティをmyCustomBackgroundに設定して、デフォルトの代わりに希望する勾配を表示します。ここで

は注意すべき他のポイントのカップルです：

• 私はできる限り凝縮としての例を維持するために他のすべての小道具やスタイリングをオフに残してきました。
• グラデーションは、カラーではなく画像であるため、backgroundColor属性の代わりにbackground CSS属性を使用して設定する必要があります。