Webpack + CSS-Module + TS = Love / Sudo Null IT News

Ich denke, CSS Modules ist ein monumentales Projekt. Es löst eines der schlimmsten CSS-Probleme – Kollisionen von Klassennamen. Schauen wir uns ein einfaches Beispiel an, um zu verdeutlichen, wovon wir sprechen.

Stellen Sie sich vor, wir entwickeln eine Button-Komponente. Die Verwendung von “reinem” CSS ist gefährlich, da die Gefahr besteht, dass jemand anderes in Ihrem Projekt (oder schlimmer noch, in einer verknüpften Bibliothek) denselben Klassennamen verwendet:

/* Button.css */ .button { Farbe: #f00; Polsterung: 10px Schriftgröße: 18px; } /* node_modules/some_lib/styles.css */ .button { color: #0f0; }// Button.tsx import { FC } from “react”; import “./Button.module.css”; importiere “some_lib/styles.css”; export const Button: FC = (props) => { // Welche Farbe der Button haben wird, kann jeder raten return

Similar Posts

Leave a Reply

Your email address will not be published.