web-dev-qa-db-fra.com

Requêtes multimédias dans les composants Material-ui

J'utilise Material-ui composants dans le projet ReactJs, pour une raison quelconque, j'ai besoin de personnalisation dans certains composants pour le rendre réactif en fonction de la largeur de l'écran.

J'ai ajouté media query et le passer comme attribut de style dans les composants mais ne fonctionne pas, une idée?

J'utilise un code comme celui-ci

const drawerWidth = {
  width: '50%',
  '@media(minWidth: 780px)' : {
    width: '80%'
  }
}

<Drawer
  .....
  containerStyle = {drawerStyle}
 >
 </Drawer>

Le code fonctionne uniquement pour le Web, sur un appareil mobile sans effet. même le code CSS ne s'applique pas, j'ai vérifié dans le dev. console. J'utilise la version Material-UI .18.7.

Toute aide serait appréciée.

PS: Selon l'exigence, j'ai besoin de faire quelques changements en fonction de la taille de l'écran en utilisant CSS.

reactjsmaterial-ui
14
Pardeep Jain

En utilisant l'attribut points d'arrêt du thème, vous pouvez utiliser les mêmes points d'arrêt utilisés pour les composants Grille et Masqué directement dans votre composant.

[~ # ~] api [~ # ~] 

theme.breakpoints.up(key) => media query

Arguments

key (String | Number): Une touche de point d'arrêt (xs, sm, etc.) ou un nombre de largeur d'écran en pixels.

Renvoie requête multimédia: une chaîne de requête multimédia prête à être utilisée avec JSS.

Exemples 

const styles = theme => ({
  root: {
    backgroundColor: 'blue',
    [theme.breakpoints.up('md')]: {
      backgroundColor: 'red',
    },
  },
});

pour plus d'informations vérifiez ceci

30
amin_2c

Voici donc ce que vous pouvez faire (hack rapide). L'interface utilisateur matérielle se plaindra cependant que vous fassiez un calcul inutile.

const styles = {
  drawerWidth: {
    width: '50%',
    ['@media (min-width:780px)']: { // eslint-disable-line no-useless-computed-key
      width: '80%'
    }
  }
}
13
V. Lipunov

J'ai résolu ce problème en faisant quelque chose comme ceci:

const dropzoneStyles = 
window.screen.availWidth < 780 ? 
{ 'width': '150px', 'height': '150px', 'border': 'none', 'borderRadius': '50%' }
: { 'width': '200px', 'height': '200px', 'border': 'none', 'borderRadius': '50%' };

puis en l'ajoutant en tant qu'attribut dans l'élément Material UI:

<Dropzone style={dropzoneStyles} onDrop={this.handleDrop.bind(this)}>

La clé est donc de découvrir l'écran de la fenêtre en utilisant window.screen.availWidth. Et vous le feriez dans la fonction render(). J'espère que ça t'as aidé!

5
limawebdev

Dans la propriété de style sur React vous ne pouvez définir que des propriétés que vous pouvez définir dans un élément DOM normal (vous ne pouvez pas inclure de requêtes média par exemple)

La façon dont vous pouvez inclure des requêtes multimédias pour ce composant serait de passer un nom de classe au composant Tiroir

<Drawer containerClassName="someClass" />

Et puis dans un fichier CSS, vous faites quelque chose comme ça

@media(min-width: 780px){
  .someClass {
    width: 50%!important;
  }
}
2
Miguel

Vous avez une faute de frappe dans la requête média. Vous devez utiliser la syntaxe suivante et cela fonctionnera comme prévu:

const drawerWidth = {
  width: '50%',
  '@media (min-width: 780px)' : {
    width: '80%'
  }
}

au lieu de

const drawerWidth = {
  width: '50%',
  '@media(minWidth: 780px)' : {
    width: '80%'
  }
}
1
croraf