Het encapsuleren van stijlen in ReactJS wordt vaak bereikt door het gebruik van CSS-modules of Styled Components. Hier is een basisvoorbeeld van hoe je dit kunt doen:
CSS Modules:
Eerst genereer je een CSS-bestand. Stel dat je een component hebt, genaamd MyComponent, je zou een bijbehorend CSS-bestand maken genaamd MyComponent.module.css.
Dit bestand kan er zo uitzien:
```
.myComponentStyle {
color: red;
}
```
Vervolgens zou je deze stijlen importeren in je react-component:
```
import styles from ‘./MyComponent.module.css’
function MyComponent() { return
Hiermee wordt de .myComponentStyle klasse alleen toegepast op elementen binnen je MyComponent, en niet op andere componenten die een .myComponentStyle klasse kunnen hebben.
Styled Components:
Met Styled Components schrijf je de CSS in je JS-bestanden.
Eerst moet je de Styled Components library installeren via npm:
```
npm install styled-components
```
Dan zou je de stijlen direct in je component kunnen definiëren, zoals dit:
```
import styled from ‘styled-components’
const MyStyledComponent = styled.div`
color: red;
`
function MyComponent() {
return
}
```
Net als bij CSS Modules, wordt de stijl van MyStyledComponent alleen toegepast op componenten die als MyStyledComponent zijn gedefinieerd, en niet op andere delen van je app.
