Comment utiliser CSS-in-JS en Reactjs ?

CSS-in-JS est une technique de stylisation où vous écrivez le CSS directement à l’intérieur du code Javascript. Il s’agit d’une approche populaire pour styliser les composants dans les applications Reactjs.

Voici comment vous pouvez utiliser CSS-in-JS dans Reactjs :

1. Choisissez une bibliothèque CSS-in-JS : Il y a plusieurs bibliothèques CSS-in-JS disponibles, comme styled-components, emotion, radium, etc. La bibliothèque styled-components est très populaire dans les applications React.

1. Installer la bibliothèque : Par exemple, si vous utilisez styled-components, vous pouvez l’installer à l’aide de npm ou de yarn :

npm install —save styled-components ou yarn add styled-components

1. Utilisez les composants stylisés dans votre application React : Vous pouvez créer des composants stylisés et les utiliser dans votre application React comme n’importe quel autre composant. Voici un exemple en utilisant la bibliothèque styled-components :

```
import styled from ‘styled-components’;

const MonComposantStylise = styled.div` color: blue; font-size: 2em;
`;

function App() { return ( Salut, je suis un composant stylisé ! )
}

export default App;
```

Dans cet exemple, `MonComposantStylisé` est un `div` qui a un style CSS spécifique. Vous pouvez le réutiliser dans toute votre application, garantissant ainsi la cohérence du style.

1. Utiliser des props pour le style basée sur la logique : Vous pouvez également modifier le style en fonction des props. Par exemple :

```
import styled from ‘styled-components’;

const MonComposantStylise = styled.div` color: ${props => props.color || ‘blue’}; font-size: 2em;
`;

function App() { return ( // Il aura la couleur rouge Salut, je suis un composant stylisé ! )
}

export default App;
```

Dans cet exemple, la couleur du texte de `MonComposantStylisé` peut être contrôlée en passant une prop `color`. Si aucune couleur n’est passée, le texte sera bleu par défaut.