Saltar al contenido

Cómo personalizar los estilos de Ant.design

Hola usuario de nuestro sitio web, tenemos la respuesta a lo que andabas buscando, continúa leyendo y la verás más abajo.

Solución:

Antd ha externalizado la mayor parte de su variable de estilo en MENOS variables

como puedes ver en

https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less

Para poder sobrescribir esas variables necesitas usar modifyVar función de MENOS

puedes encontrar más sobre tematización aquí

Así que a su pregunta específica, @layout-header-background hace el trabajo

Mi enfoque personal (aunque estoy trabajando con dva-cli):

Cada vez que necesito anular el CSS, uso un archivo CSS ubicado en la misma carpeta y lo importo como:

su-componente.js:

import styles from './your-stylesheet.css';
...
< AntdComponent className= styles.thestyle />

su-hoja-de-estilo.css:

.thestyle 
  background-color: '#555555';

Así es como personalicé los estilos antd predeterminados en un componente en particular

En scss o menos

.booking_information_table 
    :global 
        .ant-table-thead > tr > th,
        .ant-table-tbody > tr > td 
            padding: 0 0 !important;
            background-color: unset;
            border: none;
            overflow-wrap: break-word;
        
 

En el archivo js

después de la declaración de importación

importar estilos desde ‘./component.module.less’

En cambio

Sección de Reseñas y Valoraciones

Te invitamos a añadir valor a nuestro contenido informacional dando tu veteranía en las anotaciones.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Respuestas a preguntas comunes sobre programacion y tecnología