Requêtes média globales sur un projet react

Question

Je cherche à générer une structure générale de styles sur scss avec des points d'arrêt globaux en tant que media queries sur un projet react, Il est possible de réutiliser une structure pour suivre des media queries que l'on déclare comme globales. Je suis un peu perdu sur ce sujet, des idées ?

Ce que j'entends par global, c'est que nous pouvons définir les points d'arrêt à la racine du projet et que nous pouvons utiliser n'importe quelle référence sur les composants.

Merci d'avance.

Answer 1

Il y a trois façons qui me viennent à l'esprit :

1. Vous pouvez créer un variables.scss dans lequel vous pouvez écrire la valeur de vos points d'arrêt :

$sm: 576px; $md: 768px; $lg: 992px; $xl: 1200px;

Et utilisez les variables suivantes dans votre scss :

@media only screen and (min-width: $sm) {
    .container {
        .max-width: 450px;
    }
}
@media only screen and (min-width: $md) {
    .container {
        .max-width: 650px;
    }
}
@media only screen and (min-width: $lg) {
    .container {
        .max-width: 900px;
    }
}
@media only screen and (min-width: $xl) {
    .container {
        .max-width: 1000px;
    }
}

2. Ou vous pouvez utiliser les variables mentionnées dans votre mixins.scss pour créer des mixins de media query :

   @mixin small { @media only screen and (min-width: $sm) { @content; } }

Et ensuite, utilisez ces mixins dans vos codes scss principaux :

.container {
    @include small {
        max-width: 450px;
    }
    ...
}

3. Ou si les cas d'utilisation de ces media queries sont limités (par exemple, masquer et afficher des éléments), vous pouvez définir d'autres mixins qui incluent toutes les variations :

   $displays: none inline inline-block block table table-cell table-row flex inline-flex; $sizes: ( sm: $sm, md: $md, lg: $lg, lg: $xl ); @each $display in $displays: @each $size-key $size in $sizes { .display-#{size-key}-#{display} { display: $display !important; } } }

Une note sur l'importation de fichiers : Personnellement, j'importerais tous mes scss d'aide (variables, mixins, etc.). styles/index.scss dans la racine de mon projet parmi les normalisations et autres règles globales que je veux définir, et ensuite importer ce fichier dans mes autres fichiers scss :

// styles/index.scss
@import './variables.scss';
@import './mixins.scss';
...

// container.scss
@import './styles/index.scss';