将一个值从react组件传递给scss

Question

我在 .jsx 组件中有以下代码，

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

在 .scss 中，如何使用 headerContainer 类的列表模式？ 例如：

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