Composants de style React

Que sont les composants stylisés ?

Styled Components est une bibliothèque populaire pour React qui permet aux développeurs d'écrire du CSS directement dans leur code JavaScript. Cette bibliothèque exploite les littéraux de modèles balisés pour styliser vos composants. Il favorise l'utilisation de styles au niveau des composants, aidant à séparer les préoccupations de style et de structure des éléments et à rendre le code global plus maintenable.

Avantages de l'utilisation de composants stylisés

1. Style dynamique : Les composants stylisés vous permettent d'utiliser JavaScript pour définir dynamiquement des styles en fonction des accessoires, de l'état ou de toute autre variable.

2. Meilleure organisation : Garder les styles proches des composants qu'ils affectent rend votre code plus modulaire et plus facile à gérer.

3. Aucun bug de nom de classe : Étant donné que les styles sont limités aux composants, vous n'aurez pas à vous soucier des collisions de noms de classe ou des problèmes de spécificité courants avec le CSS traditionnel.

4. Prise en charge des thèmes : Styled Components offre une prise en charge intégrée des thèmes, ce qui facilite l'application de styles cohérents dans votre application.

Installation de composants stylisés

Pour commencer à utiliser les composants stylés, vous devez l'installer via npm ou Yarn :

npm install styled-components

or

yarn add styled-components

Utilisation de base

Voici un exemple de base pour illustrer le fonctionnement des composants stylisés :

import styled from "styled-components";

// Styled component named StyledButton
const StyledButton = styled.button`
  background-color: black;
  font-size: 32px;
  color: white;
`;

function Component() {
  // Use it like any other component.
  return <StyledButton> Login </StyledButton>;
}

Adaptation basée sur les accessoires

Les composants stylisés sont fonctionnels, nous pouvons donc facilement styliser les éléments de manière dynamique.

import styled from "styled-components";

const StyledButton = styled.button`
  min-width: 200px;
  border: none;
  font-size: 18px;
  padding: 7px 10px;
  /* The resulting background color will be based on the bg props. */
  background-color: ${props => props.bg === "black" ? "black" : "blue";
`;

function Profile() {
  return (
    <div>
      <StyledButton bg="black">Button A</StyledButton>
      <StyledButton bg="blue">Button B</StyledButton>
    </div>
  )
}

Thématisation

Les composants stylés prennent également en charge les thèmes, vous permettant de définir un ensemble de styles (comme les couleurs, les polices, etc.) et de les appliquer de manière cohérente dans toute votre application.

Tout d'abord, vous définissez votre thème :

import { ThemeProvider } from 'styled-components';

const theme = {
  primary: 'blue',
  secondary: 'gray',
};

Ensuite, enveloppez votre application avec le ThemeProvider et transmettez votre thème :

const App = () => (
  <ThemeProvider theme={theme}>
    <div>
      <Button primary>Primary Button</Button>
      <Button>Default Button</Button>
    </div>
  </ThemeProvider>
);

Enfin, accédez aux propriétés du thème dans vos composants stylisés :

const Button = styled.button`
  background: ${(props) => (props.primary ? props.theme.primary : props.theme.secondary)};
  color: white;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid ${(props) => props.theme.primary};
  border-radius: 3px;
`;

Conclusion

Styled Components est un outil puissant pour les développeurs React qui cherchent à améliorer la maintenabilité et l'évolutivité de leurs applications. En encapsulant les styles dans les composants et en exploitant toute la puissance de JavaScript, Styled Components offre une approche moderne et efficace du style des applications Web. Que vous travailliez sur un petit projet ou une application à grande échelle, les composants stylés peuvent vous aider à garder vos styles organisés et votre code propre.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!