CSS-Module - Referenzklassen von anderen Modulen

Question

Ich habe das Konzept von CSS-Modulen so sehr verstanden, dass ich überzeugt bin, dass ich nichts anderes tun möchte als das für die Zukunft.

Derzeit versuche ich, eine bestehende App umzufunktionieren, um CSS-Module zu verwenden, die App hat seit dem klassische Sass mit BEM-Methodik verwendet.

Bevor ich mein Problem beschreibe, möchte ich klarstellen, dass ich anspreche, dass ich ein Problem anspreche, das nicht wirklich im Bereich der CSS-Module liegt. Man sollte Stile nur für die Verwendung in einem einzelnen Modul anwenden. Allenfalls sollte man CSS-Klassen mit anderen CSS-Klassen anderer Module zusammenstellen. Aber im Grunde: Sie bauen ein (HTML-) Modul und Sie verwenden CSS-Module, um dieses Modul zu stylen und das ist es.

Hier ist das Problem: Beim Refactoring gibt es ein einziges Problem, das von einem SASS-basierten Stilsystem herrührt. Ich kann keine gültige Methode finden, um mit einer CSS-Klasse innerhalb einer CSS-Modulumgebung zu arbeiten, wenn diese Klasse in Kombination mit einer anderen Klasse aus einem anderen Modul arbeiten sollte.

Beispiel in SASS:

[page.scss]

.wrapper { 
    margin: 0; 
} 

[headline.scss]

.headline { 
    color: green; 
} 
.wrapper { 
    .headline { 
     color: orange; 
    } 
} 

Wie Sie sehen: Ein Modul (Seite) eine CSS-Klasse "Wrapper", ein anderes Modul definiert eine CSS-Klasse "Überschrift". Außerdem sollte sich die Überschrift der Klasse etwas anders verhalten, wenn sie innerhalb des Wrappers der Klasse platziert wird.

Wieder weiß ich, dass dies nicht wirklich die Domäne von CSS-Modulen ist. Aber ich würde wirklich gerne wissen, ob das mit CSS-Modulen irgendwie machbar ist? Die "Composes" -Funktion von CSS-Modulen passt hier nicht wirklich ...

Answer 1

Dies ist ein häufiges Problem bei der Migration zu CSS-Modulen. Kurz gesagt, ein CSS-Modul kann einen Stil von einem anderen CSS-Modul nicht überschreiben, und dies ist beabsichtigt. Stile sollen mit den Komponenten leben, die sie wiedergeben, und nirgendwo anders.

Um dies zu reformieren, erstellen Sie eine Komponentenstilvariante und legen die Variante explizit durch eine Stütze fest, wenn sie in Ihrem Wrapper gerendert wird.

Beispiel: Angenommen, Ihre Überschrift Komponente zur Zeit etwa wie folgt aussieht:

CSS

.headline { 
    color: green; 
} 

JSX

import styles from "Headline.css"; 
const Headline =() => { 
    return (
    <div className={styles.headline} /> 
); 
} 

Anstatt zu überschreiben versucht die .headline Klassenname von woanders, können Sie eine Variante Klassennamen erstellen, die Sie durch eine Stütze schalten:

CSS

.headline-green { 
    color: green; 
} 

.headline-orange { 
    color: orange; 
} 

JSX

import styles from "Headline.css"; 
const Headline = ({orange}) => { 
    return (
    <div className={orange ? styles.headlineOrange : styles.headlineGreen} /> 
); 
} 

Und wenn Sie machen es aus Ihr Wrapper, stellen Sie es auf die orange Variante:

<Headline orange /> 

Tipp: Sie können composes verwenden, um doppelte gängige Stile zwischen Ihren Varianten zu eliminieren.