Comment introduire un thème d’interface utilisateur dans votre application React

Dans cet article, nous aborderons différentes approches pour établir un thème d’interface utilisateur cohérent dans une application React et les avantages/compromis de chaque approche.

De nombreuses applications à grande échelle que nous utilisons aujourd’hui ont tendance à être associées à un certain thème. Le thème, dans ce contexte, peut être expliqué comme l’image de marque ou la conception d’une application qui adhère à certains principes de conception. Cela implique une utilisation cohérente de la typographie, de la couleur, des motifs et de la mise en page pour établir une structure de conception cohérente.

Pour illustrer cela davantage, voici un exemple d’application créée avec Composants KendoReact et
Thème par défaut de Kendo.

En jetant un coup d’œil à l’exemple d’application ci-dessus, vous remarquerez immédiatement qu’il existe un niveau de cohérence avec la mise en page et les styles pour tous les éléments de l’interface utilisateur présentés. En d’autres termes, il y a une cohérence thème dans l’application.

On peut voir ça:

• Les principaux appels à l’action (c’est-à-dire les boutons) ont une couleur orange (#FF6358).
• Les appels secondaires aux actions (c’est-à-dire les boutons) ont une couleur grise (#F3F3F3).
• L’arrière-plan principal est une couleur blanche unie constante (#FFF).
• Un fond secondaire est appliqué dans certaines zones avec une couleur grise cohérente (#FAFAFA).
• Tout le texte partage la même police « Roboto ».

L’établissement d’un thème de conception est important car, en tant que développeur travaillant au sein d’une équipe de développeurs et de concepteurs, nous voulons une manière réutilisable et structurée pour nous assurer que nous construisons des éléments d’interface utilisateur (par exemple, des boutons, des liens, du texte, etc.) qui suivent un thème cohérent. . De plus, comprendre comment implémenter un thème nous aide à mieux comprendre comment personnaliser et modifier les thèmes disponibles à partir de frameworks comme KendoReact.

Nous reviendrons sur la bibliothèque KendoReact et les thèmes de l’interface utilisateur Kendo à la fin de cet article. Avant cela, nous discuterons de quelques moyens simples d’implémenter un thème cohérent dans une application React.

Composants

Construire et utiliser des composants dans notre application est la première étape pour nous d’introduire la thématisation. En effet, les composants sont des éléments autonomes dans lesquels nous pouvons regrouper le balisage (HTML), les styles (CSS) et JavaScript. Nous pouvons créer des composants pour chacun des éléments d’interface utilisateur distincts que nous voulons afficher dans notre application.

ui-components/
  Button/
    Button.jsx
  Card/
    Card.jsx
  Link/
    Link.jsx
  Menu/
    Menu.jsx

Ces composants peuvent être réutilisés n’importe où tout en conservant le même aspect structurel.

const Button = ({ onClick, children }) => {
  return (
    <button className="button" onClick={onClick}>
      {children}
    </button>
  );
};

const ParentComponent = () => {
  
  return <Button>Click Me!</Button>;
};

Cependant, il y a un aspect de ces composants que l’on voudrait modifiable/extensible et c’est le thème ! Pour faciliter cela, nous pouvons créer un theme objet qui contient les propriétés de style spécifiques que nous voudrions dans le cadre de notre thème.

const theme = {
  light: {
    foreground: "#000000",
    background: "#eeeeee",
    primary: "#0092e3",
    font: "Nunito",
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222",
    primary: "#0017e3",
    font: "Nunito",
  },
};

Pour que nos composants utilisent ces styles, nous aurons besoin de ceci theme objet disponible dans tous nos composants. Nous voudrions très probablement éviter de forer ce contexte/données de thème jusqu’à tous nos composants enfants à partir du composant parent, car cela rendrait les choses difficiles à maintenir à mesure que notre application évolue.

Nous pourrions utiliser une sorte de magasin partagé (comme Redux) où les données d’état du thème sont conservées puis transmises aux composants.

Cependant, l’un des moyens les plus appropriés de transmettre des données de thème à tous nos composants peut être fait en tirant parti de l’API Context de React.

Le contexte

Le contexte dans React fournit un moyen de transmettre des données à travers une arborescence de composants sans avoir besoin de prop-drill (c’est-à-dire, transmettre les accessoires manuellement à chaque niveau).

Nous créons d’abord l’objet Context avec le createContext() une fonction. Lorsque nous créons l’objet Context, nous pouvons également spécifier la valeur de contexte par défaut dans le createContext() une fonction.

import React, { useState, useContext, createContext } from "react";
import { theme } from './theme'

const ThemeContext = createContext({ themes.light });

Nous pouvons alors envelopper le parent <App> composant avec le fournisseur de contexte pour que tous les composants enfants s’abonnent aux modifications de contexte.

import React, { createContext } from "react"
import { Button } from './ui-components'
import { theme } from './theme'

const ThemeContext = createContext({ themes.light });

function App() {
  return (
    <ThemeContext.Provider value={themes.dark}>
      {}
      <Button />
    </ThemeContext.Provider>
  );
}

Nous pouvons alors tirer parti de la useContext() crochet pour récupérer la valeur de contexte actuelle dans nos composants enfants.

import { useContext } from "react";

function Button() {
  const theme = useContext(ThemeContext);
  
}

Avec notre composant maintenant en mesure d’accéder aux styles de la theme object, nous pouvons implémenter ces styles dans notre balisage de composants de différentes manières.

Styles en ligne dynamiques

Étant donné que les composants React nous permettent de créer le balisage du composant dans un paramètre JavaScript, nous pouvons utiliser le style attribut pour ajouter des styles calculés dynamiquement au moment du rendu.

import { useContext } from "react";

function Button() {
  const theme = useContext(ThemeContext);

  return (
    <button
      style={{ background: theme.light.background, color: theme.light.primary }}
    >
      I am styled by theme context!
    </button>
  );
}

Cette approche est facile à mettre en œuvre et facile à démarrer. Cependant, ce n’est pas recommandé pour diverses raisons.

• C’est difficile à appliquer simple Sélecteurs CSS aimer :hover, :focus et :active puisque nous devrions compter sur les changements d’état pour appliquer ces fonctionnalités. De plus, nous ne pouvons pas appliquer media-queries puisque les styles en ligne dynamiques avec JS utilisent un objet JavaScript simple.
• Le balisage (c’est-à-dire la structure HTML) d’un composant peut être difficile à lire si un composant a un grand nombre de propriétés de style définies en ligne.
• Il y a aussi des implications sur les performances :
  • Avec les styles en ligne, le navigateur passe plus de temps dans les scripts car il doit mapper toutes les règles de style transmises au composant aux règles CSS réelles.
  • Sans utiliser un fichier de feuille de style CSS externe, le navigateur ne peut pas mettre en cache les styles utilisés dans notre composant. La mise en cache peut souvent améliorer les performances des pages du navigateur.

Composants stylés

Les composants de style (c’est à dire, CSS-en-JS) peut nous aider à tirer parti des littéraux de modèle pour écrire réel CSS pour styliser les composants React. C’est un peu comme implémenter des styles en ligne avec JS mais sur des stéroïdes.

Quand le styled-components/ bibliothèque est installée, nous pouvons définir notre style de composant comme suit.

import { useContext } from "react";
import styled, { css } from "styled-components";


const StyledButton = styled.button`
  ${(props) =>
    css`
      background: ${props.theme.light.background};
      color: ${props.theme.light.primary};
    `}
`;

import { useContext } from "react";

function Button() {
  const theme = useContext(ThemeContext);

  return (
    <StyledButton theme={theme}>I am styled by theme context!</StyledButton>
  );
}

Noter la styled-components/ la bibliothèque a une capacité plus concrète pour introduire un support de thème sur lequel vous pouvez lire ici. Je n’ai partagé qu’un exemple simple ici.

L’avantage d’utiliser styled-components sur la définition de styles en ligne dynamiques, c’est que nous évitons un grand nombre des problèmes que nous rencontrons avec les styles en ligne en JavaScript. Nos styles sont compilés en tant que CSS réels et nous pouvons utiliser des fonctionnalités CSS (comme @media-queries) et des sélecteurs (comme :hover, :focus, :active).

Cependant, certains problèmes potentiels liés à l’utilisation styled-components sont:

• CSS n’est toujours plus un document séparé mais fait partie de nos fichiers JavaScript.
• Les styles seuls ne peuvent pas être partagés facilement avec d’autres projets car ils sont colocalisés dans les composants React.

Variables CSS

Variables CSS (c’est-à-dire des propriétés CSS personnalisées) peuvent nous aider à obtenir un style conditionnel dans le contexte de CSS ! Comme leur nom l’indique, les variables CSS nous permettent de stocker des valeurs CSS dans des propriétés qui peuvent être réutilisées dans un document CSS.

Au lieu de définir nos styles de thème dans un theme objet, nous pouvons créer des propriétés CSS de thème qui encapsulent les variables CSS de notre thème. Nous pouvons définir ces propriétés dans des classes CSS.

.light-theme {
  --foreground: "#000000";
  --background: "#eeeeee";
  --primary: "#0092e3";
  --font: "Nunito";
}

.dark-theme {
  --foreground: "#ffffff";
  --background: "#222222";
  --primary: "#0017e3";
  --font: "Nunito";
}

Nous pouvons ensuite appliquer l’une de ces classes dans le balisage parent de notre racine <App /> composant:

import React from "react";
import { Button } from "./ui-components";
import "./styles";

function App() {
  return (
    <div id="app" className="light-theme">
      <Button />
    </div>
  );
}

Si jamais nous voulions permettre à un utilisateur de remplacer ou de basculer un thème défini, nous pouvons également introduire cette fonctionnalité.

import React, { useState } from "react";
import { Button } from "./ui-components";
import "./styles";

function App() {
  const [theme, updateTheme] = useState("light-theme");

  const toggleTheme = () => {
    if (theme === "light-theme") {
      updateTheme("dark-theme");
    } else {
      updateTheme("light-theme");
    }
  };

  return (
    <div id="app" className={theme}>
      {}
      <Button onClick={() => toggleTheme()} />
    </div>
  );
}

Dans nos composants enfants, nous n’avons plus à définir notre fonctionnalité de thème dans le contexte de notre code JavaScript. Au lieu de cela, nous pouvons définir des classes CSS qui dérivent des valeurs pour ses propriétés à partir de nos variables CSS de thème. Nous pouvons accéder aux valeurs de nos variables CSS en utilisant le var() mot-clé.

Voici un exemple de définition d’un .button classe où les valeurs des background et color properties sont les valeurs des variables CSS définies dans notre fichier CSS racine.

.button {
  background: var(--background);
  color: var(--primary);
}

import React from "react";
import "./styles";

function Button() {
  return (
    <button className="button">I am styled by theme CSS variables!</button>
  );
}

L’utilisation de variables CSS présente des avantages utiles par rapport à une approche CSS-in-JS.

• Nous n’avons plus à compter entièrement sur JavaScript pour dicter conditionnellement les styles et le thème de nos composants.
• Nous n’avons pas besoin de tirer parti et d’utiliser les API de contexte ou une autre capacité pour s’assurer que nos composants ont accès aux données de style thème.
• Si nous implémentons une fonctionnalité permettant à un utilisateur de modifier le thème de l’application, et lorsque cela se produit, nous n’aurons pas plusieurs composants dans notre arborescence de composants re-rendre pour refléter le changement (ce qui se produirait toujours avec une approche CSS-in-JS). Cela pourrait conduire à une amélioration des performances pour les grandes applications avec de nombreux composants.

En évitant l’utilisation de CSS dans JS, nous pouvons également tirer parti de différentes manières d’aider à structurer le CSS de l’ensemble de notre application.

BIEN

Par exemple, nous pouvons éviter les problèmes de spécificité CSS en suivant une méthodologie pour que chacune de nos classes CSS soit nommée d’une manière très particulière.block__element--modifier. Ceci est souvent reconnu comme le BIEN méthodologie.

.button {
  background: var(--background);
  color: var(--primary);
}

.button--disabled {
  background: var(--disabled);
  color: var(--disabled);
}

.button--error {
  background: var(--error);
  color: var(--error);
}

TOUPET

Ou, nous pouvons utiliser un préprocesseur CSS comme SCSS (ou SASS) ce qui peut aider à étendre notre CSS avec des « super pouvoirs ».

.button {
  background: var(--background);
  color: var(--primary);

  &.disabled {
    background: var(--disabled);
    color: var(--disabled);
  }

  &.error {
    background: var(--error);
    color: var(--error);
  }
}

Un préprocesseur comme SCSS/SASS fournit des fonctionnalités utiles telles que des règles imbriquées, des mixins, des fonctions, etc. Cependant, l’utilisation d’un préprocesseur comme SCSS/SASS introduit une autre étape de compilation puisque les fichiers SCSS doivent être compilés en CSS.

Modules CSS

Enfin, nous pourrions tirer parti des modules CSS. Les modules CSS sont des fichiers CSS où tous les noms de classe sont étendus localement par défaut. C’est un processus dans une étape de construction (avec l’aide d’un outil comme webpack) qui change les noms de classe et les sélecteurs à délimiter. Il est conçu pour résoudre le problème de portée globale dans CSS.

Avec les modules CSS, c’est la garantie que tous les styles d’un même composant :

• Vivre au même endroit.
• Et ne s’applique qu’à ce composant.

import React from "react";
import ButtonStyles from "./ButtonStyles.css";

function Button() {
  return (
    <button className={ButtonStyles.Button}>
      I am styled with a locally scoped ButtonStyle!
    </button>
  );
}

Comme mentionné ci-dessus, pour faire fonctionner les modules CSS, nous devons utiliser un processus de construction comme Webpack qui a des chargeurs tels que css-loader et style-loader.

Thématisation dans KendoReact

Nous avons parlé de quelques moyens utiles d’introduire un thème cohérent dans notre application React. Cependant, écrire, créer et produire du code CSS robuste pour de grandes applications prendre beaucoup de travail. La présentation, l’apparence, la réactivité, l’accessibilité et la structure sont autant de choses qu’il faut garder à l’esprit lors de la construction du code frontal.

C’est là qu’interviennent souvent les frameworks UI/CSS. Les frameworks UI/CSS sont des packages contenant des modèles et du code CSS pré-écrits, standardisés et souvent bien testés. Ils aident à accélérer le développement, fournissent souvent une mise en page en grille et aident à appliquer une bonne conception Web.

Un excellent exemple d’un framework UI/CSS robuste est celui de Progress KendoRéagir une bibliothèque. KendoReact fournit de nombreux composants React prêts à l’emploi tels que :

KendoReact fournit trois thèmes qui peuvent être utilisés pour l’ensemble de la suite de composants.

• Les Thème par défaut disponible via le @progress/kendo-theme-default paquet npm.
• Les Thème d’amorçage disponible via le @progress/kendo-theme-bootstrap paquet npm.
• Les Thème matériel disponible via le @progress/kendo-theme-material paquet npm.

(L’équipe Progress ajoute également un Thème fluidepris en charge dans Kits Figma et ThemeBuilder Pro.)

Vous aimez l’un de ces thèmes mais souhaitez y apporter quelques légères modifications ? KendoReact prend en charge cela ! Nous pouvons personnaliser les variables de thème directement dans notre application.

Voici où vivent les variables CSS du thème par défaut de Kendo :

https://github.com/telerik/kendo-themes/blob/develop/packages/default/scss/_variables.scss

En utilisant cela comme point de départ, nous pouvons personnaliser les variables de thème directement dans notre application React comme suit :

$primary: #ff69b4;


@import "~@progress/kendo-theme-default/dist/all.scss";

Notez que ce qui précède ne fonctionne qu’avec l’existence d’un processus de construction (par exemple, avec webpack) dans notre application React. Pour plus d’informations, reportez-vous à la documentation de KendoReact Personnalisation des thèmes article.

Conclure

En concluant cet article, nous devrions maintenant comprendre les avantages d’établir un thème cohérent dans une application. Nous devons également maintenant reconnaître les différentes façons d’introduire un thème dans notre application React et les avantages/compromis entre chaque approche.

Enfin, KendoReact est un framework React/UI robuste qui fournit plus de 100 composants prêts à l’emploi et nous permet de choisir entre trois thèmes déjà préétablis (Default, Material et Bootstrap). Nous avons également la possibilité de personnaliser entièrement n’importe quel thème si nous choisissons de le faire. Pensez à utiliser KendoRéagir si vous envisagez d’introduire un nouveau cadre de conception dans votre application React !