Lulus nilai daripada komponen tindak balas kepada scss
P粉463824410
P粉463824410 2023-09-13 13:35:11
0
1
548

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

P粉463824410
P粉463824410

membalas semua(1)
P粉274161593

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}>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan