style
-Attributs auf HTML-Elementen. Dieses funktioniert jedoch etwas anders als in HTML und so erwartet React ein Objekt in der Form Eigenschaft: Wert
, wobei als Eigenschaft die JavaScript-Schreibweise einer CSS-Eigenschaft erwartet wird. Also etwa zIndex
statt z-index
, backgroundColor
statt background-color
oder marginTop
statt margin-top
. Bei Werten, die Pixel-Angaben akzeptieren, ist die Verwendung von px
als Einheit optional:z-index
, flex
oder fontWeight
) sind davon nicht betroffen, sie können bedenkenlos benutzt werden, ohne dass React sie um px
ergänzt. style
-Eigenschaft von DOM-Elementen (document.getElementById('root').style
ist ebenfalls ein Objekt!) und sorgt außerdem dafür, dass keine Sicherheitslücken durch XSS entstehen können.class
, sondern className
:className
-Prop auch dynamisch über String Concatenation zusammengesetzt werden:className
in jedem Fall item
und für den Fall, dass das ausgewählte Item dem aktuellen Item entspricht item item--selected
.classnames
etabliert. Mit diesem ist es möglich, Klassen abhängig von einer Bedingung zu machen. Installiert werden kann es über die CLI, mittels:classNames
zu. Die Funktion erwartet dann beliebig viele Parameter die entweder ein String sein können oder ein Objekt in der Form { Klasse: true|false }
. Die Funktionsweise ist dabei ebenfalls recht simpel: Ist der Wert für eine Eigenschaft true
, setzt classNames
eine Klasse mit dem selben Eigenschaftsnamen. Im obigen Beispiel wäre das also:true
ist:ProfileImage.js
, existiert beim CSS Modules Ansatz oft auch eine Datei mit dem Namen ProfileImage.module.css
. Beim Import eines solchen CSS Moduls wird dann sichergestellt, dass ein einmaliger, oftmals etwas kryptischer Klassenname generiert wird, um so sicherzustellen, dass diese Klasse nur in der jeweiligen Komponente verwendet wird. Konflikte mit anderen Komponenten, die gleiche Klassennamen verwenden, sollen so ausgeschlossen werden.css-loader
für Webpack..module.css
ist dabei keineswegs zwingend und auch ein bloßes .css
wäre möglich, .module.css
hat sich aber bei einigen bekannten Tools mit großer Reichweite als Konvention entwickelt und wird auch von Create React App ohne die Notwendigkeit des Vornehmens weiterer Konfigurationseinstellungen unterstützt. CRA greift dabei auf die eben angesprochene css-loader
-Implementierung für Webpack zurück.css
befindet sich nun ein Objekt mit Eigenschaften, die den Klassennamen aus unserem CSS Modul entsprechen. Existiert in der CSS-Datei eine CSS-Klasse mit dem Namen image
haben wir nun im css
-Objekt ebenfalls eine Eigenschaft mit dem Namen image
. Dabei ist der Wert ein einmaliger, generierter String wie z.B. ProfileImage_image_2cvf73
. className
vergeben:image
noch in einer anderen Komponente und importieren dort ebenfalls eine CSS-Datei mit einer image
-Klasse würde es hier, anders als in gewöhnlichem CSS, nicht zu einem Konflikt kommen, da der generierte Klassenname ein anderer wäre. styled
-Funktion und nutzen das jeweilige HTML-Element, das wir stylen wollen, als Eigenschaft. Anschließend nutzen wir die Template Literal Syntax aus ES2015 um das CSS für unsere Styled Component zu definieren. const Button = styled.button
erzeugt Styled Components dabei eine neue Button
-Komponente und weist der Komponente die CSS-Eigenschaften zu, die wir im darauffolgenden Template Literal definieren. Innerhalb dieses Template Literals wird dann wiederum herkömmliches CSS verwendet. :hover
-Status etwa so aus:not-allowed
Symbol werden, wenn der Button eine disabled
-Eigenschaft besitzt. Darüber hinaus bietet Styled Components auch Unterstützung für Themes, serverseitiges Rendering, CSS-Animationen und vieles mehr. Für eine (sehr) detaillierte Übersicht empfehle ich an dieser Stelle, einen Blick auf die gute und umfassende Dokumentation zu werfen.