Heim  >  Fragen und Antworten  >  Hauptteil

Übergeben Sie einen Wert von der Reaktionskomponente an scss

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粉463824410P粉463824410425 Tage vor531

Antworte allen(1)Ich werde antworten

  • P粉274161593

    P粉2741615932023-09-14 09:42:16

    您可以反转与 css-modules 的关系,我建议设置它在像 Webpack 这样的构建系统中(例如使用 sass-loadercss-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}>
    

    Antwort
    0
  • StornierenAntwort