Dans ce didacticiel, nous allons explorer comment utiliser des composants stylés dans une application React pour créer des styles modulaires, réutilisables et dynamiques. Nous commencerons par les bases de l'installation et de l'utilisation du styled-componentspackage, puis passerons à la création de composants de style personnalisés avec des styles dynamiques.

Conditions préalables

Avant de commencer, assurez-vous que les éléments suivants sont installés sur votre système :

• Node.js et npm (ou fil)
• Un éditeur de code (par exemple VS Code, Sublime Text)

Commençons par installer le styled-componentspackage en exécutant la commande suivante dans votre terminal :

npm install styled-components

import React from 'react';
import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: #008CBA;
  color: white;
  font-size: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
  border: none;
`;

const App = () => {
  return (
    <div>
      <h1>Hello World</h1>
      <StyledButton>Click me</StyledButton>
    </div>
  );
}

export default App;

Créer des styles dynamiques avec des accessoires

L'un des avantages de l'utilisation styled-componentsest la possibilité de créer des styles dynamiques basés sur des accessoires. Modifions notre StyledButtoncomposant pour avoir différentes couleurs d'arrière-plan basées sur un primaryaccessoire.

const StyledButton = styled.button`
  background-color: ${props => props.primary ? '#008CBA' : '#E6E6E6'};
  color: white;
  font-size: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
  border: none;
`;

<StyledButton>Default button</StyledButton>
<StyledButton primary>Primary button</StyledButton>

Un autre avantage de l'utilisation styled-componentsest la possibilité de créer des composants de style réutilisables. Créons un Cardcomposant de style personnalisé que nous pouvons réutiliser dans notre application.

const Card = styled.div`
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  padding: 1em;
  border-radius: 3px;
`;

<Card>
  <h2>Card title</h2>
  <p>Card content</p>
</Card>

styled-componentsfournir un moyen puissant et flexible de styliser vos composants React. Ils offrent plusieurs avantages, notamment la modularité, les styles étendus, les styles dynamiques et une meilleure lisibilité. Dans ce didacticiel, nous avons exploré les bases de l'utilisation de styled-components, de la création de styles dynamiques avec des accessoires et de la création de composants de style réutilisables. Avec ces connaissances, vous pouvez commencer à utiliser styled-componentsvos propres applications React et profiter de leurs avantages.