Heim > Fragen und Antworten > Hauptteil
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; }
P粉2741615932023-09-14 09:42:16
您可以反转与 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}>