Apply CSS Klassenname durch direkten Zugriff auf das DOM

Question

Ich habe eine Komponente, die CSS-Module verwendet, mit Hilfe der babel-plugin-react-css-modules Plugin.

An einigen Punkten während der Lebensdauer der Komponente möchte ich in der Lage sein, neue Dimensionen zu berechnen, indem ich direkt auf das DOM zugreife.

In meinem SCSS-Stylesheet habe ich eine Klasse mit dem Namen .full-width, die ich auf das DOM-Element der Komponente anwenden möchte, um eine Berechnung durchzuführen, und dann wieder zu entfernen.

Jetzt, da das Hinzufügen der Klasse und das Entfernen eines Bruchteils einer Sekunde später die Komponente oder ihren Zustand nicht beeinflusst, möchte ich die Klasse hinzufügen und entfernen, indem ich direkt auf das DOM zugreife und nicht irgendwie durchläuft es zu der Komponente state.

Wenn ich this.DOMReference.classList.add('full-width'); die Klasse full-width wird hinzugefügt, aber ich möchte die modularisierte Version der Klasse hinzuzufügen, wie es angewendet werden würde, wenn ich styleName="full-width" tat (zB Component__full-width___Pjd10)

Gibt es eine Möglichkeit dies zu tun, ohne .full-width eine globale Erklärung zu machen?

Würde ich dies mit react-css-modules tun können?

Answer 1

Nun, ich erkannte ich die Stile unter einer Variablen importieren, statt anonym, zum Beispiel

import styles from './styles.scss' statt import './styles.scss' und dann kann ich es als solches

this.DOMReference.classList.add(styles['full-width']);

ich auch verwenden muss nicht styleName="styles.someClass" entweder verwenden, kann ich einfach styleName="someClass" verwenden (solange es nur eine Stylesheet-Datei importiert, sonst müssen Sie es als die ehemalige tun)

Ich würde gerne bessere Möglichkeiten hören, dies zu tun.