將一個值從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}>