CSS
Inline-Styles
Bei Inline-Styles werden die Style-Informationen direkt innerhalb des entsprechenden HTML-Elements mit dem Style-Attribut gesetzt. Bei React muss der Wert des Style-Attributs ein JavaScript-Objekt sein und in doppelte geschweifte Klammern gesetzt werden. Außerdem muss für die CSS-Eigenschaften die sog. „camelCase“-Syntax verwendet und die Eigenschaftswerte in Anführungsstriche gesetzt werden:
index.html:
index.js:
Ergebnis:
Das Style-Objekt kann dabei auch als Variable übergeben werden:
index.js:
Ergebnis:
External Stylesheets
Bei einem externen Stylesheet werden die Style-Informationen in einer externen Datei mit der Endung „.css“ erfasst und in die React-Anwendung mit „import“ eingebunden:
index.html:
style.css:
index.js:
Ergebnis:
CSS-Module
Wird für ein externes Stylesheet die Endung „.module.css“ verwendet, wird die CSS-Datei als Modul deklariert und kann mit „import name from ‚...module.css‘“ über den Namen angesprochen werden. Dies vermeidet eventuelle Namenskonflikte bei der Verwendung mehrerer externer CSS-Dateien:
index.html:
style.module.css:
index.js:
Ergebnis:
