CSS-in-JS ist eine Technik zur Stylerung von Komponenten in ReactJS und anderen JavaScript-Frameworks. Es handelt sich dabei um eine moderne Methode, bei der CSS direkt in JavaScript geschrieben wird. Hier sehen Sie, wie Sie es in ReactJS verwenden können.
Zuerst müssen Sie eine CSS-in-JS-Bibliothek installieren. Eine beliebte Option ist styled-components. Sie können es mit npm oder yarn installieren:
```
npm install styled-components
```
oder
```
yarn add styled-components
```
Das sind die grundlegenden Schritte zur Verwendung von styled-components in einer React-Komponente:
```js
import React from ‘react’;
import styled from ‘styled-components’;
// Erstellen Sie eine neue gestylte Komponente
const StyledComponent = styled.div`
background-color: lightblue;
padding: 20px;
border-radius: 5px;
`;
function MyReactComponent() {
return (
Hello, world!
}
export default MyReactComponent;
```
In diesem Code erstellen wir eine neue gestylte Komponente mit der Syntax `styled.div`, gefolgt von einer Template-Literal-Syntax, um den CSS-Code zu schreiben. Diese gestylte Komponente kann dann wie jede andere React-Komponente verwendet werden.
Andere toole für CSS-in-JS sind Emotion, JSS, Radium und Aphrodite. Die Methode zur Verwendung variiert je nach Bibliothek, aber die grundlegende Idee besteht darin, CSS-Code direkt in Ihre Komponenten zu schreiben oder zu importieren.
Ein Vorteil dieser Herangehensweise ist, dass Sie Stile isolieren können, so dass Änderungen in einer Komponente sich nicht auf andere Komponenten auswirken. Einige der Libraries bieten sogar Extras wie automatisches Anhängen von Vendor-Prefixen, Unterstützung für CSS-Animationen und Theming.
