Comment faire en sorte que le casse-croûte puisse prendre toute la largeur dans les petits écrans?

Question

à cause de ce commit: https://github.com/callemall/material-ui/commit/11695dcfa01e802797115d42c6d3d82d7657b6ab#diff-e9014062cd8e3b4344ab619966f35ef2

Le snack ne prend pas une largeur de 100% dans les écrans mobiles. Quelqu'un peut-il aider à savoir comment 100% de largeur peut encore être donnée en cas de petits écrans?

-> Avant cette validation, width: 'auto' a fait l'affaire, mais maintenant plus.

Toute aide est appréciée.

Answer 1

Vous pouvez utiliser une requête média:

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

Answer 2

Eh bien je me suis dit dehors, il suffit de passer {width: '100%'} dans la prop BodyStyle, il remplace de celui-ci.

Answer 3

La largeur ne fonctionne pas pour moi car elle ne fait aucun effet je ne sais pas pourquoi. la largeur prend seulement la valeur par défaut bien que je mette à 100%. Je suis en mesure d'appliquer pleine largeur en utilisant minWidth et j'utilise la version matérielle-ui: 0.18.7. Vous devez remplacer la valeur minWidth pour appliquer une largeur personnalisée. S'il vous plaît trouver l'exemple ci-dessous

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} 
     />