小さな画面でスナックバーを全幅にするにはどうすればいいですか？

Question

このコミットのため： https://github.com/callemall/material-ui/commit/11695dcfa01e802797115d42c6d3d82d7657b6ab#diff-e9014062cd8e3b4344ab619966f35ef2

スナークバーはモバイル画面で100％幅を占めません。小さな画面の場合でも100％の幅が与えられる方法について誰でも助けてくれますか？

- >このコミットの前に、width： 'auto'がトリックをしましたが、もうこれ以上のことはありません。

何か助けていただければ幸いです。

Answer 1

あなたはメディアクエリを使用することができます。bodyStyle属性の小道具で、それはそれから上書きされます：

@media only screen and (max-width : 480px) { 
    .yourClass { width: 100%; } 
} 

Answer 2

まあ、私はちょうどで、{「100％」の幅を}渡す必要があり、それを考え出しました。

Answer 3

理由がわからないので、幅が私にとっては機能しません。私は100％に設定していますが、widthはデフォルト値のみをとります。私はminWidthを使用して全幅を適用することができ、材料 - UIバージョン：0.18.7を使用しています。カスタム幅を適用するには、minWidth値をオーバーライドする必要があります。以下の例を見つけてください

import Snackbar from 'material-ui/Snackbar'; 

const bodyStyle = { 
    border: `2px solid ${config.actualWhite}`, 
    height:55, 
    minWidth: 1385, 
    background: config.snackbarColor, 
    fontFamily: config.fontFamily, 
    fontStyle: config.fontStyle, 
    fontWeight: config.fontWeight, 
    fontSize: config.fontSize, 
    borderBottomRightRadius: 46, 
    borderBottomLeftRadius: 46 
} 

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