Guia de Sobrescrita de CSS de Ant Design

Esta página fornece um guia detalhado sobre a sobrescrita de estilos do Ant Design, incluindo como customizar estilos de componentes, configurar temas e lidar com prioridades de CSS.

Customização do Tema (Theme Customization)

O Ant Design permite que você personalize o estilo geral configurando um tema. A configuração do tema é alcançada principalmente por meio de variáveis Less.

Método de Configuração

Instale o less e o less-loader em seu projeto:
```
npm install less less-loader --save-dev
```

Crie o vue.config.js na raiz do projeto (para projetos Vue CLI) ou modifique o config-overrides.js (para projetos CRA) e adicione o seguinte código:

const { defineConfig } = require('vue-cli-plugin-antd-config');
module.exports = defineConfig({
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            'primary-color': '#1DA57A',
            'link-color': '#1DA57A',
            'border-radius-base': '2px',
          },
          javascriptEnabled: true,
        },
      },
    },
  },
});

Variáveis Less

O Ant Design fornece uma série de variáveis Less para a personalização do tema. As variáveis comuns incluem:

Variável	Descrição	Valor padrão
`@primary-color`	Cor primária	`#1890ff`
`@link-color`	Cor do link	`@primary-color`
`@success-color`	Cor de sucesso	`#52c41a`
`@warning-color`	Cor de aviso	`#faad14`
`@error-color`	Cor de erro	`#f5222d`
`@font-size-base`	Tamanho da fonte de base	`14px`
`@heading-color`	Cor do título	`rgba(0, 0, 0, 0.85)`
`@text-color`	Cor do texto principal	`rgba(0, 0, 0, 0.65)`
`@text-color-secondary`	Cor do texto secundária	`rgba(0, 0, 0, 0.45)`
`@disabled-color`	Cor desativada	`rgba(0, 0, 0, 0.25)`
`@border-radius-base`	Raio do limite de componentes/popover	`4px`
`@border-color-base`	Cor da borda	`#d9d9d9`
`@box-shadow-base`	Sombra do componente	`0 2px 8px rgba(0, 0, 0, 0.1)`

Sobrescrita de estilo (Style Overriding)

Em alguns casos, você pode precisar de sobrescritas mais detalhadas dos estilos do Ant Design. Isso pode ser alcançado aumentando a especificidade dos seletores CSS ou usando !important.

Prioridade de CSS

As regras de prioridade do CSS determinam qual regra tem efeito quando várias regras de estilo são aplicadas ao mesmo elemento. A prioridade de alta a baixa é:

Estilos embutidos (Inline styles)
Seletores de ID (#id)
Seletores de classe (.class), pseudoclasses (:hover) e seletores de atributos ([type="text"])
Seletores de elementos (div, h1, etc.) e pseudo-elementos (::before, ::after)
Seletor universal (*) e combinadores (descendant, child, adjacent sibling, general sibling)

Usando !important

O !important pode ser usado para aumentar a prioridade de uma regra de estilo, forçando-a a ter efeito. No entanto, não é recomendado o uso excessivo e deve ser usado como último recurso.

.ant-btn {
  background-color: red !important;
}

Conclusão

Através da customização do tema e da sobrescrita de estilo, os desenvolvedores podem ajustar de forma flexível os estilos do Ant Design de acordo com os requisitos do projeto e criar interfaces de aplicação exclusivas. Para obter mais informações, consulte a documentação oficial do Ant Design.