Passer une valeur du composant React à scss

Question

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

Answer 1

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