Lulus nilai daripada komponen tindak balas kepada scss

Question

Saya mempunyai kod berikut dalam komponen .jsx,

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

Bagaimana untuk menggunakan mod senarai kelas headerContainer dalam .scss? Contohnya:

.headerContainer.listmode{

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

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

Answer 1

Anda boleh membalikkan hubungan dengan css-modules, saya syorkan anda menyediakannya dalam sistem binaan seperti Webpack (cth. menggunakan pemalam sass-loader dan css-loader). Nama kelas kemudiannya boleh diimport ke dalam JavaScript. Secara lalai, setiap kelas adalah skop setempat (iaitu diberi nama unik), tetapi ini boleh diubah menggunakan pilihan yang tersedia.

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