2017-12-31 186 views
2

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

+0

backgroundColorを線形グラデーションカラーの背景に変更すると、私にとって効果があります。添付のsnackbarイメージを参照してください。 –

答えて

1

材料-UI V0

。具体的にはbackgroundColorlinear-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属性を使用して設定する必要があります。
+0

お時間をありがとう。私は上記の方法と同じ方法で申し込んだが、それは私にとってはうまくいかない。私はmaterial-uiバージョン0.18.7を使用しています。しかし、あなたの答えは私を他の方法で助けました。 bodyStyleでbackgroundColorを線形グラデーションカラーの背景に変更しました。今は完璧に動作しています。ありがとうございました –

+0

ああ大丈夫、私はあなたがmaterial-ui @ nextを使用していないことを認識していませんでした。私の答えを更新してください。 –

+0

また、現在のバージョンと比較して多くの改善(および変更の変更)を行っている次のバージョン(v1-beta)にアップグレードすることを検討する必要があります。 –

関連する問題