Passer une valeur du composant React à scss
P粉463824410
P粉463824410 2023-09-13 13:35:11
0
1
549

J'ai le code suivant dans un composant .jsx,

<div className={type === "travellist" ? "headerContainer listmode" : "headerContainer"}>

Comment utiliser le mode liste de la classe headerContainer en .scss ? Par exemple :

.headerContainer.listmode{

            margin: 20px 0px 40px 0px;
            }
or 
    .headerContainer{

            margin: 20px 0px 100px 0px;
            }

P粉463824410
P粉463824410

répondre à tous(1)
P粉274161593

Vous pouvez inverser la relation avec les css-modules, je recommande de la configurer dans un système de build comme Webpack (par exemple en utilisant les plugins sass-loader et css-loader). Le nom de la classe peut ensuite être importé en JavaScript. Par défaut, chaque classe a une portée locale (c'est-à-dire qu'elle reçoit un nom unique), mais cela peut être modifié à l'aide des options disponibles.

/* In your stylesheet */
.headerContainer.listmode {
    margin: 20px 0px 40px 0px;
}
.headerContainer{
    margin: 20px 0px 100px 0px;
}
// In JS
import { headerContainer, listmode } from './style.scss';

const className = type === 'travellist' ? `${headerContainer} ${listmode}` : `${headerContainer}`;
<div className={className}>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal