Guía de Sobrescritura de CSS de Ant Design

Esta página proporciona una guía detallada sobre la sobrescritura de estilos de Ant Design, incluyendo cómo personalizar estilos de componentes, configurar temas y manejar prioridades de CSS.

Personalización de temas

Ant Design permite personalizar el estilo general mediante la configuración de un tema. La configuración del tema se realiza principalmente a través de variables Less.

Método de configuración

Instala less y less-loader en tu proyecto:
```
npm install less less-loader --save-dev
```

Crea vue.config.js en la raíz del proyecto (para proyectos Vue CLI) o modifica config-overrides.js (para proyectos CRA) y añade el siguiente 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,
        },
      },
    },
  },
});

Variables Less

Ant Design proporciona una serie de variables Less para la personalización de temas. Las variables comunes incluyen:

Variable	Descripción	Valor por defecto
`@primary-color`	Color primario	`#1890ff`
`@link-color`	Color de enlace	`@primary-color`
`@success-color`	Color de éxito	`#52c41a`
`@warning-color`	Color de advertencia	`#faad14`
`@error-color`	Color de error	`#f5222d`
`@font-size-base`	Tamaño de fuente base	`14px`
`@heading-color`	Color de encabezado	`rgba(0, 0, 0, 0.85)`
`@text-color`	Color de texto principal	`rgba(0, 0, 0, 0.65)`
`@text-color-secondary`	Color de texto secundario	`rgba(0, 0, 0, 0.45)`
`@disabled-color`	Color de deshabilitado	`rgba(0, 0, 0, 0.25)`
`@border-radius-base`	Radio de borde de componentes/popovers	`4px`
`@border-color-base`	Color de borde	`#d9d9d9`
`@box-shadow-base`	Sombra de componentes	`0 2px 8px rgba(0, 0, 0, 0.1)`

Sobrescritura de estilos

En algunos casos, es posible que necesite sobrescrituras más granulares de los estilos de Ant Design. Esto se puede lograr aumentando la especificidad de los selectores CSS o usando !important.

Prioridad de CSS

Las reglas de prioridad de CSS determinan qué regla entra en vigor cuando se aplican múltiples reglas de estilo al mismo elemento. La prioridad de mayor a menor es:

Estilos en línea (Inline styles)
Selectores de ID (#id)
Selectores de clase (.class), pseudoclases (:hover) y selectores de atributos ([type="text"])
Selectores de elementos (div, h1, etc.) y pseudoelementos (::before, ::after)
Selector universal (*) y combinadores (descendant, child, adjacent sibling, general sibling)

Uso de !important

!important se puede usar para aumentar la prioridad de una regla de estilo, forzando su entrada en vigor. Sin embargo, no se recomienda su uso excesivo y debe usarse como último recurso.

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

Conclusión

A través de la personalización de temas y la sobrescritura de estilos, los desarrolladores pueden ajustar de manera flexible los estilos de Ant Design de acuerdo con los requisitos del proyecto y crear interfaces de aplicación únicas. Para obtener más información, consulte la documentación oficial de Ant Design.