Cómo personalizar un tema de React usando Ant Design

Decir que un buen diseño de interfaz de usuario (UI) juega un papel muy importante para atraer a la audiencia de su sitio web y llevarlos a una conversión es un poco subestimado. Si bien cualquier buena interfaz de usuario requiere un diseño interactivo, intuitivo, enriquecido y accesible, un desafío aparentemente abrumador, se puede lograr cuando utiliza componentes y bibliotecas de alta calidad para construirlo.

El más popular de estos es el diseño Ant. Es una biblioteca React UI que tiene acceso a componentes de calidad fáciles de usar para crear interfaces de usuario elegantes y rápidas.

¿Por qué diseño de hormigas?

Creado por Alibaba, el sistema de diseño Ant es utilizado por varios nombres importantes como Alibaba (por supuesto), Tencent, Baidu y más.

Se ha convertido rápidamente en la biblioteca React UI más utilizada. Anteriormente, Material-UI era el más popular con más de 75 000 estrellas en Github, ¡pero ahora Ant Design los ha superado con 77,5 000!

Lo que Ant Design ha hecho tan bien es humanizar su diseño. Evalúan la calidad del diseño comparándolo con cuatro valores centrados en la conciencia humana y la felicidad: naturalidad, certeza, significado y crecimiento. Esos actúan como un estándar para los diseñadores y los guían en la toma de decisiones y un mejor juicio.

Componentes de diseño de hormigas

El diseño Ant (o antd) ofrece muchos componentes de interfaz de usuario enriquecidos que pueden mejorar la experiencia de su sitio web o aplicación. Echa un vistazo a algunos de ellos a continuación, pero para ver más opciones, visita aquí.

Componentes Universales: Botones, iconos, tipografía, etc.

Diseños: cuadrículas, diseños, espaciado, etc.

Navegación: Migas de pan, menús, menús desplegables, etc.

Entrada de datos: Autocompletar, casilla de verificación, selector de fecha, etc.

Visualización de datos: Avatar, comentarios, paneles plegables, etc.

Instalación de React y Ant Design

Ahora que sabemos qué componentes están disponibles en el diseño de Ant, aprendamos el proceso básico de instalación de React y luego instalemos el diseño de Ant en él.

Puede usar yarn o npm para configurar el proyecto React. A continuación se muestran los comandos básicos para instalar y configurar React:

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

Una vez que React está instalado, puede ver la aplicación en ejecución en el navegador.

Este es el directorio generado por defecto en el proyecto recién creado. En el futuro, modificaremos algunos de los archivos aquí para lograr el resultado 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

Ahora, después de configurar React, instalemos el diseño Ant con este comando:

 $ yarn add antd

Después de instalar antd, puede usar los componentes de Ant modificando el marcado en App.js que se encuentra dentro de la carpeta src en su proyecto. Aquí, estoy agregando un elemento de botón 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;

Componente de botón de hormiga:

Una vez que guarde y ejecute la aplicación, podrá ver el elemento del botón principal de Ant en el navegador en color azul (como se muestra arriba). Esto significa que Ant se integró con éxito en React.

Personalización de un tema

La mejor parte de integrar Ant Design con React es que le permite personalizar sus tokens de diseño para satisfacer la diversidad de UI de los requisitos comerciales o de marca, incluido el color primario, el radio del borde, el color del borde, etc.

Créditos de la imagen: Intoli

Para permitir esta personalización, deberá realizar algunas configuraciones avanzadas.

Configuración avanzada:

En este punto, debe personalizar las configuraciones predeterminadas de create-react-app. Usemos CRACO (Create React App Configuration Override), una solución comunitaria para la configuración personalizada de create-react-app.

Paso 1: Primero deberá instalar CRACO y reemplazar el React-script predeterminado con CRACO en 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", }

De acuerdo con los requisitos de configuración del tema, el tema personalizado debe usar la función de anulación de variable Less similar a la proporcionada por less-loader. Podemos introducir Craco-less para ayudar a cargar menos estilos y modificar variables.

 $ yarn add craco-less

Paso 2: Modifique el archivo src/ App.css a src/App.less e importe el archivo antd.less sobre antd.css en app.less

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

Paso 3: Cree craco.config.js en el directorio raíz para modificar la configuración predeterminada.

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

Aquí, less-loader es modifyVars utilizado para la configuración del tema.

Si ve un botón verde, sabe que la configuración se realizó correctamente. Ahora puede personalizar el tema con su propio conjunto de colores usando las fichas/variables provistas.

Variables de estilo de diseño de Ant

A continuación se muestran algunas de las variables genéricas más utilizadas. Puede visitar aquí para obtener detalles sobre todas las variables de estilo 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