Wie führt man eine Stilkapselung in Reactjs durch?

Die Stilkapselung in Reactjs kann durch verschiedene Methoden durchgeführt werden, darunter CSS-Module, Styled Components, Inline-Styling oder CSS-in-JS-Libraries. Hier sind die Schritte, um dies mit CSS-Modulen zu tun:

1. CSS-Module einrichten: Erstellen Sie eine CSS-Datei in Ihrem Komponentenverzeichnis und schreiben Sie Ihre Styles darin.

2. In der Komponente importieren: Importieren Sie das CSS-Modul in der React-Komponente. So können Sie beispielsweise in Ihrer `MyComponent.js`-Datei das Modul `styles.css` importieren: `import styles from ‘./styles.css’;`

3. In der Komponente verwenden: Verwenden Sie den importierten Stil in der JSX Ihres React-Komponenten-Renderns. z.B., `

Hello World

Mit Styled Components würde es so aussehen:

1. Einrichten: Installieren Sie die `styled-components` Library mit `npm install styled-components`.

2. Importieren: Importieren Sie die `styled-components` in Ihrer Komponente: `import styled from ‘styled-components’;`

3. Erstellen Sie eine gestylte Komponente: `const StyledDiv = styled.div` color: blue; `;`

4. Verwenden Sie die gestylte Komponente in der Rendermethode Ihrer React-Komponente: `Hello World`

Diese Methoden stellen sicher, dass die definierten Stile in einer Komponente nur auf diese Komponente angewendet werden, sie kapseln den Stil also ein.