Übergeben Sie einen Wert von der Reaktionskomponente an scss

Question

Ich habe den folgenden Code in einer .jsx-Komponente,

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

Wie verwende ich den Listenmodus der HeaderContainer-Klasse in .scss? Zum Beispiel:

.headerContainer.listmode{

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

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

Answer 1

您可以反转与 css-modules 的关系，我建议设置它在像 Webpack 这样的构建系统中（例如使用 sass-loader 和 css-loader 插件）。然后可以将类名导入到 JavaScript 中。默认情况下，每个类都是本地范围的（即给出唯一的名称），但可以使用可用选项进行更改。

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