Comment personnaliser un thème React à l'aide de Ant Design

C'est un peu un euphémisme de dire qu'une bonne conception de l'interface utilisateur (UI) joue un rôle énorme dans l'engagement de l'audience de votre site Web et la conduit à une conversion. Bien que toute bonne interface utilisateur nécessite une conception interactive, intuitive, riche et accessible - un défi apparemment intimidant - elle est réalisable lorsque vous utilisez des composants et des bibliothèques de haute qualité pour la créer.

Le plus populaire d'entre eux est le design Ant. Il s'agit d'une bibliothèque d'interface utilisateur React qui a accès à des composants de qualité faciles à utiliser pour créer des interfaces utilisateur élégantes et rapides.

Pourquoi Ant Design ?

Créé par Alibaba, le système de conception Ant est utilisé par plusieurs grands noms comme Alibaba (bien sûr), Tencent, Baidu, et bien d'autres.

Elle est rapidement devenue la bibliothèque d'interface utilisateur React la plus utilisée. Auparavant, Material-UI était le plus populaire avec plus de 75 000 étoiles sur Github, mais Ant Design les a maintenant dépassés avec 77 500 !

Ce que la conception d'Ant a si bien fait, c'est d'humaniser leur conception. Ils évaluent la qualité du design en se comparant à quatre valeurs centrées sur la conscience humaine et le bonheur : le naturel, la certitude, la signification et la croissance. Ceux-ci agissent comme une norme pour les concepteurs et les guident dans la prise de décision et un meilleur jugement.

Composants de conception de fourmi

Ant design (ou antd) offre de nombreux composants d'interface utilisateur riches qui peuvent améliorer l'expérience de votre site Web ou de votre application. Découvrez-en quelques-uns ci-dessous, mais pour plus d'options, rendez-vous ici.

Composants universels : boutons, icônes, typographie, etc.

Mises en page : grilles, mises en page, espacement, etc.

Navigation : Fil d'Ariane, menus, menus déroulants, etc.

Saisie de données : saisie semi-automatique, case à cocher, sélecteur de date, etc.

Affichage des données : Avatar, commentaires, panneaux pliables, etc.

Installation de React et Ant Design

Maintenant que nous savons quels composants sont disponibles dans la conception Ant, apprenons le processus d'installation de base de React, puis installons-y la conception Ant.

Vous pouvez utiliser yarn ou npm pour configurer le projet React. Vous trouverez ci-dessous les commandes de base pour installer et configurer React :

 $ yarn create react-app antd-demo # or $ npx create-react-app antd-demo $ cd antd-demo $ yarn start

Une fois React installé, vous pouvez voir l'application en cours d'exécution dans le navigateur.

Il s'agit du répertoire généré par défaut dans le projet nouvellement créé. À l'avenir, nous modifierons certains des fichiers ici pour obtenir le résultat final.

 ├── README.md ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ └── logo.svg └── yarn.lock

Maintenant, après avoir configuré React, installons-y Ant design avec cette commande :

 $ yarn add antd

Après avoir installé antd, vous pouvez utiliser les composants Ant en modifiant le balisage dans App.js qui se trouve dans le dossier src de votre projet. Ici, j'ajoute un élément de bouton de Ant.

 import React from 'react'; import { Button } from 'antd'; import './App.css'; const App = () => ( <div className="App"> <Button type="primary">Button</Button> </div> ); export default App;

Composant du bouton Ant :

Une fois que vous avez enregistré et exécuté l'application, vous pourrez voir l'élément du bouton principal Ant dans le navigateur en bleu (comme indiqué ci-dessus). Cela signifie qu'Ant est intégré avec succès dans React.

Personnaliser un thème

La meilleure partie de l'intégration d'Ant Design avec React est qu'elle vous permet de personnaliser vos jetons de conception pour satisfaire la diversité de l'interface utilisateur à partir des exigences de l'entreprise ou de la marque, y compris la couleur primaire, le rayon de la bordure, la couleur de la bordure, etc.

Crédits image : Intoli

Pour permettre ces personnalisations, vous devrez effectuer des configurations avancées.

Configuration avancée :

À ce stade, vous devez personnaliser les configurations par défaut de create-react-app. Utilisons CRACO (Create React App Configuration Override) - une solution communautaire pour la configuration personnalisée de create-react-app.

Étape 1 : Vous devrez d'abord installer CRACO et remplacer le script React par défaut par CRACO dans package.json.

 $ yarn add @craco/craco /* package.json */ "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", + "start": "craco start", + "build": "craco build", + "test": "craco test", }

Selon les exigences de configuration du thème, le thème personnalisé doit utiliser la fonction de remplacement de variable Less similaire à celle fournie par less-loader. Nous pouvons introduire Craco-less pour aider à charger moins de styles et modifier les variables.

 $ yarn add craco-less

Étape 2 : Modifiez le fichier src/App.css en src /App.less et importez le fichier antd.less sur antd.css dans app.less

 /* src/App.js */ - import './App.css'; + import './App.less'; /* src/App.less */ - @import '~antd/dist/antd.css'; + @import '~antd/dist/antd.less';

Étape 3 : Créez craco.config.js dans le répertoire racine pour modifier la configuration par défaut.

 const CracoLessPlugin = require('craco-less'); module.exports = { plugins: [ { plugin: CracoLessPlugin, options: { lessLoaderOptions: { lessOptions: { modifyVars: { '@primary-color': '#1DA57A' }, javascriptEnabled: true, }, }, }, }, ], };

Ici, less-loader est modifyVars utilisé pour la configuration du thème.

Si vous voyez un bouton vert, vous savez que la configuration est réussie. Vous pouvez maintenant personnaliser le thème avec votre propre ensemble de couleurs en utilisant les jetons/variables fournis.

Variables de style de conception de fourmi

Voici quelques-unes des variables génériques les plus couramment utilisées. Vous pouvez visiter ici pour obtenir des détails sur toutes les variables de style disponibles.

 @primary-color: #1890ff; // primary color for all components @link-color: #1890ff; // link color @success-color: #52c41a; // success state color @warning-color: #faad14; // warning state color @error-color: #f5222d; // error state color @font-size-base: 14px; // major text font size @heading-color: rgba(0, 0, 0, 0.85); // heading text color @text-color: rgba(0, 0, 0, 0.65); // major text color @text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color @disabled-color: rgba(0, 0, 0, 0.25); // disable state color @border-radius-base: 2px; // major border radius @border-color-base: #d9d9d9; // major border color @box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); // major shadow for layers