Material UI Snackbar overlaps

Question

Material UI Snackbarを使用しています。マテリアルUIはあまり新しくはありませんが、どういうわけか、問題を解決できません。つまり、画面上部にスナップバーが重なって表示されています。私はそれを修正するために別の方法を試みたが、運がない。誰かが私を助けてくれますか？あなたの素早い応答を感謝します。 Snackbarコンポーネントとそのボディスタイルの下にあります。また、参考までにScreenshotを見つけてください。単独のスクリーンショットから

bodyStyle:{ 
    border: "2px solid #ffffff", 
    minWidth: '50%', 
    maxWidth: '100%', 
    flexGrow: 0, 
    height:'55px', 
    backgroundColor: 'transparent', 
    fontFamily: "Open Sans,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif", 
    fontStyle: 'normal', 
    fontWeight: 400, 
    fontSize: 16 
} 
snackbarfromTop: { 
    top: 0, 
    color: white, 
    bottom: 'auto', 
} 

<Snackbar 
     open={this.state.open} 
     message={this.state.error} 
     autoHideDuration={4000} 
     bodyStyle={myTheme.bodyStyle} 
     action="Close" 
     onRequestClose={this.handleRequestClose} 
     onActionTouchTap={this.handleRequestClose} 
     style={myTheme.snackbarfromTop} 
     /> 

Answer 1

、私は100％を伝えることはできませんが、あなただけであなたのSnackbarを透明にしているようだ。だから、あなたが実際にを通してそれをを見ている

backgroundColor: 'transparent' 

。

これを修正するには、あなたのコンポーネントにbackgroundColorを指定する必要があり、またはのような、「透明」オーバーライドを削除します

backgroundColor: '#bada55' 

はあなたがあなたの色を宣言するためにwithStyles/withTheme HOCで見たいと思うかもしれませんある場所で別のコンポーネントで再利用すると、次のようなものになります。

backgroundColor: theme.palette.my.predefined.color