Como personalizar um tema React usando o Ant Design

É um pouco eufemismo dizer que um bom design de interface do usuário (UI) desempenha um papel importante no envolvimento do público do seu site e levá-los a uma conversão. Embora qualquer boa interface do usuário exija um design interativo, intuitivo, rico e acessível - um desafio aparentemente assustador - é possível quando você usa componentes e bibliotecas de alta qualidade para construí-lo.

O mais popular deles é o design Ant. É uma biblioteca React UI que tem acesso a componentes de qualidade e fáceis de usar para construir interfaces de usuário elegantes e rápidas.

Por que design de formigas?

Criado pela Alibaba, o sistema de design Ant é usado por vários grandes nomes como Alibaba (é claro), Tencent, Baidu e muito mais.

Tornou-se rapidamente a biblioteca React UI mais usada. Anteriormente, o Material-UI era o mais popular com mais de 75 mil estrelas no Github, mas o Ant Design agora os ultrapassou com 77,5 mil!

O que o design Ant fez tão bem foi humanizar seu design. Eles avaliam a qualidade do design medindo em relação a quatro valores centrados na consciência humana e na felicidade - naturalidade, certeza, significado e crescimento. Esses atuam como um padrão para os designers e os orientam na tomada de decisões e no melhor julgamento.

Componentes de design de formigas

O design do Ant (ou antd) oferece muitos componentes de interface do usuário avançados que podem aprimorar a experiência do seu site ou aplicativo. Confira alguns deles abaixo, mas para mais opções, visite aqui.

Componentes Universais: Botões, ícones, tipografia, etc.

Layouts: Grades, layouts, espaçamento, etc.

Navegação: migalhas de pão, menus, menus suspensos, etc.

Entrada de dados: preenchimento automático, caixa de seleção, seletor de data, etc.

Exibição de dados: Avatar, comentários, painéis recolhíveis, etc.

Instalando React e Ant Design

Agora que sabemos quais componentes estão disponíveis no Ant design, vamos aprender o processo básico de instalação do React e então instalar o Ant design nele.

Você pode usar yarn ou npm para configurar o projeto React. Abaixo estão os comandos básicos para instalar e configurar o React:

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

Depois que o React estiver instalado, você poderá ver o aplicativo em execução no navegador.

Este é o diretório padrão gerado no projeto recém-criado. Daqui para frente, modificaremos alguns dos arquivos aqui para obter o 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

Agora depois de configurar o React, vamos instalar o Ant design nele com este comando:

 $ yarn add antd

Depois de instalar o antd, você pode usar os componentes do Ant modificando a marcação no App.js que está dentro da pasta src do seu projeto. Aqui, estou adicionando um elemento de botão do 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 do botão Ant:

Depois de salvar e executar o aplicativo, você poderá ver o elemento do botão principal do Ant no navegador na cor azul (como mostrado acima). Isso significa que o Ant está integrado com sucesso no React.

Personalizando um tema

A melhor parte de integrar o Ant Design com o React é que ele permite que você personalize seus tokens de design para satisfazer a diversidade da interface do usuário dos requisitos de negócios ou marca, incluindo cor primária, raio da borda, cor da borda, etc.

Créditos da imagem: Intoli

Para permitir essas customizações, você precisará fazer algumas configurações avançadas.

Configuração Avançada:

Neste ponto, você precisa personalizar as configurações padrão de create-react-app. Vamos usar CRCO (Create React App Configuration Override) - uma solução de comunidade para configuração personalizada de create-react-app.

Etapa 1: primeiro você precisará instalar o CRCO e substituir o script React padrão pelo CRCO em 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 acordo com os requisitos de configuração do tema, o tema personalizado precisa usar a função Less variable override semelhante àquela fornecida pelo less-loader. Podemos introduzir o Craco-less para ajudar a carregar menos estilos e modificar variáveis.

 $ yarn add craco-less

Etapa 2: modifique o arquivo src/App.css para src/App.less e importe o arquivo antd.less sobre antd.css em app.less

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

Etapa 3: Crie craco.config.js no diretório raiz para modificar a configuração padrão.

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

Aqui, o less-loader é o modifyVars usado para configuração do tema.

Se você vir um botão verde, você sabe que a configuração foi bem-sucedida. Agora você pode personalizar o tema com seu próprio conjunto de cores usando os tokens/variáveis ​​fornecidos.

Variáveis ​​de estilo de design de formigas

Abaixo estão algumas das variáveis ​​genéricas mais usadas. Você pode visitar aqui para obter detalhes sobre todas as variáveis ​​de estilo disponíveis.

 @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