Le guide ultime du style réagir les composants

Le paysage React a de nombreuses solutions de style à choisir. La meilleure solution de style est celle qui vous aide à expédier de grandes expériences utilisateur tout en gardant votre base de code maintenable et votre équipe productive.

Le style React Components a évolué au fil des ans. Des styles en ligne aux solutions CSS-in-JS, et des bibliothèques de composants aux frameworks de l’utilité, les développeurs ont désormais de nombreuses options pour créer des interfaces utilisateur visuellement attrayantes et maintenables.

Dans cet article, nous explorerons certaines des méthodes les plus populaires et les plus efficaces pour styliser les composants de réaction aujourd’hui. Que vous créiez un petit projet personnel ou que vous architectiez une application d’entreprise à grande échelle, la compréhension des différences entre ces approches de style vous aidera à prendre des décisions plus éclairées lors de l’architecture de l’interface utilisateur de votre application.

Components stylisés | Une solution CSS-in-JS populaire

composants coiffés Reste l’une des solutions CSS-in-JS les plus populaires. CSS-in-JS nous permet d’écrire du code CSS réel dans les fichiers JavaScript à l’aide d’une balise modèle littéraux.

Le concept derrière les composants stylisés crée des composants réagis avec Styles attachés directement à eux. Au lieu d’écrire des fichiers CSS séparés et d’appliquer des noms de classe, nous définissons les composants stylisés qui encapsulent à la fois le type d’élément et ses styles.

import styled from 'styled-components';

const Button = styled.button`
  background-color: ${props => props.primary ? '#007bff' : '#6c757d'};
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;

  &:hover {
    background-color: ${props => props.primary ? '#0056b3' : '#5a6268'};
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
`;


function App() {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
}

Dans l’exemple ci-dessus, nous créons un Button composant utilisant styled.button Et le modèle littéral contient des CSS réguliers mais avec quelques ajouts. Le ${props => ...} La syntaxe nous permet de modifier dynamiquement des styles en fonction des accessoires transmis au composant:

• Quand nous utilisons <Button primary>le bouton reçoit un fond bleu.
• Sans primary Prop, le bouton obtient un fond gris.
• Le &:hover et &:disabled Les sélecteurs fonctionnent comme dans CSS ordinaire en appliquant des styles pour différents états.

Certains des principaux avantages des composants stylisés comprennent l’extraction CSS critique automatique et aucune collision de nom de classe. Cependant, cela ajoute à la taille du bundle JavaScript de l’application et nécessite un exécution.

Modules CSS | CSS à portée locale

Modules CSS Offrez une approche différente en conservant CSS dans des fichiers séparés tout en générant automatiquement des noms de classe uniques pour éviter la pollution globale de l’espace de noms. Cette méthode est devenue populaire parmi les gens qui préfèrent la séparation des préoccupations tout en souhaitant des styles dans les parasites.

La clé des modules CSS est qu’ils doivent être configurés dans un outil de construction comme webpack, Viteou Next.js. Voici un exemple de création d’un fichier de module CSS:

.button {
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.primary {
  background-color: #007bff;
  color: white;
}

.primary:hover {
  background-color: #0056b3;
}

.secondary {
  background-color: #6c757d;
  color: white;
}

.secondary:hover {
  background-color: #5a6268;
}

.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

Voici un exemple de la façon dont nous pouvons utiliser ces styles dans une réaction Button composant:

import styles from './Button.module.css';

function Button({ variant = 'primary', disabled, children, onClick }) {
  const className = `${styles.button} ${styles[variant]} ${disabled ? styles.disabled : ''}`;
  
  return (
    <button 
      className={className} 
      disabled={disabled}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

export default Button;

Lorsque nous importons un module CSS (par exemple, import styles from './Button.module.css'), nous obtenons un objet où chaque nom de classe de notre fichier CSS devient une propriété. Les noms de classe réels dans le DOM seront transformés en quelque chose d’unique, comme Button_button__2Je3Cpour s’assurer qu’il n’y a pas de conflits mondiaux.

La grande chose à propos des modules CSS est qu’ils se compilent avec un format d’échange de bas niveau appelé ICSS (CSS interopérable)qui gère la magie de la portée locale tout en gardant notre CSS ressemblant à un CSS normal.

CSS du vent arrière | La révolution de l’utilité d’abord

CSS du vent arrière a changé comment un grand nombre de développeurs approchent le style en fournissant des cours de services publics que nous pouvons composer directement dans JSX, Éliminer la nécessité d’écrire CSS personnalisé dans la plupart des cas.

Chaque classe de Tailwind représente une propriété et une valeur CSS spécifiques. Voici un exemple simple de ProductCard Composant qui fait référence à de nombreuses classes d’utilité de vent arrière différentes:

function ProductCard({ product }) {
  return (
    <div className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
      <img 
        src={product.imageUrl} 
        alt={product.name}
        className="w-full h-48 object-cover"
      />
      <div className="p-6">
        <h3 className="text-xl font-semibold text-gray-800 mb-2">
          {product.name}
        </h3>
        <p className="text-gray-600 mb-4 line-clamp-2">
          {product.description}
        </p>
        <div className="flex justify-between items-center">
          <span className="text-2xl font-bold text-indigo-600">
            ${product.price}
          </span>
          <button className="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200">
            Add to Cart
          </button>
        </div>
      </div>
    </div>
  );
}

Décodons ce que font certains de ces cours de services publics:

Bien que les cours d’utilité de Tailwind soient puissants, nous voulons souvent créer des modèles de composants réutilisables. Voici un exemple de construction d’un composant de bouton plus flexible qui permet la personnalisation:

import { forwardRef } from 'react';
import clsx from 'clsx';

const Button = forwardRef(({ 
  variant = 'primary', 
  size = 'medium', 
  className,
  children,
  ...props 
}, ref) => {
  const baseStyles = 'inline-flex items-center justify-center font-medium rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2';
  
  const variants = {
    primary: 'bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500',
    secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500',
    danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
    ghost: 'bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-500'
  };
  
  const sizes = {
    small: 'px-3 py-1.5 text-sm',
    medium: 'px-4 py-2 text-base',
    large: 'px-6 py-3 text-lg'
  };
  
  return (
    <button
      ref={ref}
      className={clsx(
        baseStyles,
        variants[variant],
        sizes[size],
        className
      )}
      {...props}
    >
      {children}
    </button>
  );
});

Button.displayName = 'Button';

export default Button;

Dans le composant ci-dessus, nous définissons baseStyles qui s’appliquent à toutes les variantes de bouton, tandis que le variants et sizes Les objets mappent les valeurs de prop en combinaisons spécifiques de classe d’utilité. Le clsx utilité (un populaire className Bibliothèque de concaténation) combine ces classes intelligemment et la facultatif className Prop permet aux consommateurs d’ajouter des styles supplémentaires en cas de besoin.

L’approche de l’utilitaire de Tailwind offre un développement rapide et une implémentation de conception cohérente. Cependant, cela peut conduire à un HTML verbeux et a une courbe d’apprentissage pour les développeurs habitués aux approches CSS traditionnelles.

Pour une plongée plus profonde dans le vent arrière et comment il peut être utilisé avec des bibliothèques de composants d’entreprise comme Progress Kendoreact, assurez-vous de consulter cet article précédent: Une introduction sur le vent arrière CSS: avant, inconvénients et cas d’utilisation du monde réel.

Configuration d’un thème

Peu importe la méthode de style que vous choisissez, la mise en œuvre d’un thème cohérent dans votre application est souvent un aspect central du maintien de la cohérence du design. Une méthode courante pour implémenter un thème à l’échelle de l’application est d’utiliser Variables CSSqui fournit un moyen performant de mettre en œuvre le thème sans provoquer des réactions. Nous pouvons configurer un système de thème basé sur des variables CSS en définissant d’abord les variables CSS liées au thème:

:root {
  
  --color-primary: #007bff;
  --color-secondary: #6c757d;
  --color-background: #ffffff;
  --color-surface: #f8f9fa;
  --color-text: #212529;
  --color-text-secondary: #6c757d;
  --color-border: #dee2e6;
  
  --shadow-small: 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-large: 0 10px 15px rgba(0, 0, 0, 0.1);
  
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
}

[data-theme="dark"] {
  --color-primary: #0d6efd;
  --color-secondary: #6c757d;
  --color-background: #212529;
  --color-surface: #343a40;
  --color-text: #f8f9fa;
  --color-text-secondary: #adb5bd;
  --color-border: #495057;
  
  --shadow-small: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-large: 0 10px 15px rgba(0, 0, 0, 0.3);
}


* {
  transition: background-color 0.3s ease, color 0.3s ease;
}

Ces variables CSS sont définies au niveau racine et changent automatiquement lorsque l’attribut de thème de données change sur l’élément de document. La règle de transition garantit des changements de couleur lisse lors de la commutation de thèmes. Maintenant, nous pouvons utiliser ces variables CSS dans nos composants Quelle que soit notre approche de style:

.card {
  background-color: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-medium);
}


const Card = styled.div`
  background-color: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-medium);
`;

Une autre approche pour mettre en place un thème cohérent sur une application React consiste à tirer parti API de contexte de React.

Pour plus de détails sur les différentes façons d’introduire un thème d’interface utilisateur dans un projet React, assurez-vous de consulter cet article précédent: Comment introduire un thème d’interface utilisateur dans votre application React.

Bibliothèques de composants

Bien que la construction de composants personnalisés nous donne un contrôle total sur le style et le comportement, la mise à profit des bibliothèques de composants établies peut accélérer considérablement le développement.

Les bibliothèques de composants sont particulièrement utiles lorsque nous avons besoin de composants prêts pour la production avec accessibilité intégrée, de documentation complète, d’un langage de conception cohérent entre les composants et des fonctionnalités complexes comme les grilles de données ou les cueilleurs de date. Ils sont particulièrement avantageux pour les applications d’entreprise où le délai de marché et la fiabilité sont cruciaux.

Kendoreact: Composants de qualité d’entreprise

Progrès Kendoreact Se démarque comme une bibliothèque de composants d’interface utilisateur complète qui propose plus de 120 composants conçus pour des applications professionnelles. Ce qui rend la bibliothèque Kendoreact particulièrement attrayante, c’est son attention aux besoins d’entreprise et son approche flexible du style.

Voici un exemple simple de la façon dont nous pouvons implémenter une interface de gestion des données plus complexe assez facilement avec l’utilisation de certains composants de Kendoreact:

import { Grid, GridColumn } from '@progress/kendo-react-grid';
import { Button } from '@progress/kendo-react-buttons';
import { DatePicker } from '@progress/kendo-react-dateinputs';
import '@progress/kendo-theme-bootstrap/dist/all.css';

function OrderManagement() {
  const [orders, setOrders] = useState([
    {
      id: 1,
      customerName: 'John Doe',
      orderDate: new Date(2025, 0, 15),
      total: 156.99,
      status: 'Shipped'
    },
    {
      id: 2,
      customerName: 'Jane Smith',
      orderDate: new Date(2025, 0, 14),
      total: 234.50,
      status: 'Processing'
    }
  ]);

  const [selectedDate, setSelectedDate] = useState(new Date());

  return (
    <div className="order-management">
      <div className="filters">
        <DatePicker
          value={selectedDate}
          onChange={(e) => setSelectedDate(e.value)}
          format="dd/MM/yyyy"
          placeholder="Filter by date"
        />
        <Button themeColor="primary" icon="filter">
          Apply Filters
        </Button>
      </div>

      <Grid
        data={orders}
        style={{ height: '400px' }}
        sortable={true}
        pageable={true}
      >
        <GridColumn field="id" title="Order ID" width="100px" />
        <GridColumn field="customerName" title="Customer" />
        <GridColumn field="orderDate" title="Date" format="{0:d}" />
        <GridColumn field="total" title="Total" format="{0:c}" />
        <GridColumn field="status" title="Status" />
      </Grid>
    </div>
  );
}

Cet exemple présente plusieurs composants de Kendoreact travaillant ensemble. Le Dattepicker Fournit une interface de sélection de date entièrement tracée avec validation du format. Le Bouton Le composant comprend un support de thème intégré via le themeColor accessoire et peut afficher les icônes. Le Grille Le composant est particulièrement puissant car il gère automatiquement le tri (lorsque sortable={true}), pagination (quand pageable={true}), et le formatage des données à travers le format Prop sur les colonnes.

La beauté de la suite Kendoreact réside dans sa flexibilité. Nous pouvons l’utiliser avec ses thèmes intégrés pour un développement rapide ou le personnaliser pour correspondre parfaitement à notre système de conception. Avec Kendoreact gratuit Bibliothèque offrant plus de 50 composants sans frais, il est devenu une option attrayante pour les projets de toutes tailles.

Meilleures pratiques pour les composants de réaction de style

Comme nous avons exploré diverses approches de style dans cet article, il existe des meilleures pratiques générales à garder à l’esprit.

Maintenir la cohérence

Que ce soit en utilisant des composants stylisés, des modules CSS ou un vent arrière, essayez de maintenir la cohérence tout au long de votre projet. Mélanger plusieurs approches pourrait entraîner des défis de confusion et de maintenance.

Jetons de conception

Définissez les valeurs de votre système de conception (couleurs, espacement, typographie) dans un emplacement centralisé (par exemple, variables CSS, fichier de jetons de conception, etc.). Cela crée une seule source de vérité pour votre système de conception:

export const tokens = {
  colors: {
    brand: {
      primary: '#007bff',
      primaryDark: '#0056b3',
      secondary: '#6c757d'
    },
    semantic: {
      error: '#dc3545',
      warning: '#ffc107',
      success: '#28a745',
      info: '#17a2b8'
    }
  },
  typography: {
    fontFamily: {
      sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
      mono: 'SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace'
    },
    fontSize: {
      xs: '0.75rem',
      sm: '0.875rem',
      base: '1rem',
      lg: '1.125rem',
      xl: '1.25rem'
    }
  },
  spacing: {
    0: '0',
    1: '0.25rem',
    2: '0.5rem',
    3: '0.75rem',
    4: '1rem',
    5: '1.25rem',
    6: '1.5rem',
    8: '2rem'
  }
};

Composition des composants

Créez des composants complexes en composant ceux plus simples. Cela aide à promouvoir la réutilisabilité et la maintenabilité:

const Box = styled.div`
  padding: ${props => props.padding || '0'};
  margin: ${props => props.margin || '0'};
  background: ${props => props.background || 'transparent'};
`;

const Flex = styled(Box)`
  display: flex;
  flex-direction: ${props => props.direction || 'row'};
  align-items: ${props => props.align || 'stretch'};
  justify-content: ${props => props.justify || 'flex-start'};
  gap: ${props => props.gap || '0'};
`;


function UserCard({ user }) {
  return (
    <Box padding="1rem" background="white">
      <Flex align="center" gap="1rem">
        <Avatar src={user.avatar} />
        <Box>
          <Typography variant="h3">{user.name}</Typography>
          <Typography variant="body2" color="textSecondary">
            {user.email}
          </Typography>
        </Box>
      </Flex>
    </Box>
  );
}

Dans l’exemple ci-dessus, le Box et Flex Les composants servent de blocs de construction avec des accessoires configurables. Le UserCard Composant compose ces primitives pour créer un élément d’interface utilisateur plus complexe. Ce modèle réduit la duplication de code (car d’autres composants peuvent désormais tirer parti Box et Flex) et crée une API cohérente pour l’espacement et la mise en page tout au long de votre application.

Considérations de performance

Soyez conscient des implications de performance lors du choix de votre approche de style:

• Avec CSS-in-JS, évitez de créer des composants stylisés à l’intérieur des fonctions de rendu, car cela crée de nouvelles instances de composants sur chaque rendu.
• Utilisez des variables CSS pour les valeurs de thème qui changent fréquemment pour éviter de déclencher des rerendurs de réaction.
• Tirez parti des modules CSS ou du vent arrière pour des styles statiques pour éviter les frais généraux d’exécution.
• Considérer coup de code Pour que les bibliothèques de grandes composants pour réduire la taille initiale du faisceau.

Accessibilité

N’oubliez pas l’accessibilité! Vérifiez que vos choix de style soutiennent l’accessibilité en fournissant un contraste de couleur adéquat, des états de mise au point visibles et en respectant les préférences des utilisateurs le cas échéant:

const Button = styled.button`
  /* Ensure sufficient color contrast */
  background-color: #007bff;
  color: white;
  
  /* Visible focus states */
  &:focus {
    outline: 2px solid #0056b3;
    outline-offset: 2px;
  }
  
  /* Respect user preferences */
  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
`;

Dans l’exemple simple ci-dessus, le focus Le plan aide les utilisateurs du clavier à voir quel élément est actif, tandis que le préfère le mouvement réduit La requête multimédia respecte les utilisateurs qui ont indiqué qu’ils préfèrent une réduction du mouvement dans leurs paramètres de système d’exploitation.

Conclure

Le paysage React aujourd’hui propose aujourd’hui différentes solutions de style pour différents types de projets et préférences d’équipe. styled-components Fournit un style dynamique et spécial avec une excellente prise en charge de typeScript. Les modules CSS offrent une approche équilibrée avec des préoccupations séparées et des frais généraux minimaux. CSS à vent arrière améliore la vitesse de développement avec sa philosophie de l’utilité. Et les bibliothèques de composants comme Kendoreact accélèrent le développement avec des composants prêts pour la production.

N’oubliez pas que la meilleure solution de style est celle qui vous aide à expédier de grandes expériences utilisateur tout en gardant votre base de code maintenable et votre équipe productive. Choisissez une approche qui s’aligne le mieux sur les exigences de votre projet et l’expertise d’équipe.

Et n’oubliez pas: vous pouvez utiliser gratuitement des composants gratuits de Kendoreact, pas de chaînes, même en production.

Installer maintenant