0

Estoy tratando de usar un componente Modal de la librería Ant Design.

El problema es que al importar el CSS antd/dist/antd.css se aplican absolutamente todos los estilos de la librería al resto de mi APP, lo que incluye sus estilos a los H1, H2, etc.

Lo que yo necesito es que se apliquen solo los estilos del componente Modal.

Para lograr eso intenté aplicar una de las soluciones que encontré en uno de los issues de la librería: Remove global Styles

Más puntualmente la que sugiere importar solo los estilos específicos de un componente y no todo el archivo antd/dist/antd.css.

Me quedó algo así:

import React from 'react';
import ReactDOM from 'react-dom';
/*import 'antd/dist/antd.css';*/
import Button from 'antd/lib/button';
import 'antd/lib/button/style/index.css'
import Modal from 'antd/lib/modal';
import 'antd/lib/modal/style/index.css'
import Space from 'antd/lib/space';
import 'antd/lib/space/style/index.css'

import { ExclamationCircleOutlined } from '@ant-design/icons';

const { confirm } = Modal;

const deletes = () => {
 console.log('OK, desde función deletes');
}

function showDeleteConfirm() {
confirm({
    title: '¿Seguro que desea eliminar esta asginación?',
    icon: <ExclamationCircleOutlined />,
    content: 'Tenga en cuenta que esta acción no se puede deshacer.',
    cancelText: 'No',
    okText: 'Sí',
    okType: 'danger',
    onCancel() {
     console.log('Cancel');
    },
    onOk() {
     deletes()
    },
});
}

ReactDOM.render(
<Space>
    <Button onClick={showDeleteConfirm} type="dashed">
     Delete
    </Button>
</Space>,
document.getElementById('container'),
);

Edit new

Como se puede ver, ahí importo a "Button", "Modal" y "Space" por separado con sus respectivos estilos.

Haciendo eso puedo evitar los estilos globales, pero pierdo la funcionalidad del componente Modal. Por ejemplo, pierdo su efecto de transición y además tampoco puedo cerrar el Modal.

Entonces, mi pregunta sería: ¿existe alguna forma de importar un componente de Ant Design evitando los estilos globales y sin perder sus funcionalidades?

Ya investigué bastante y me parece que es más un problema de cómo está planteada la librería a que sea algo que se pueda resolver.

1 respuesta 1

0

Encontré una solución que quizás no sea la definitiva ni sirva para todos, pero al menos en mi caso funcionó.

Como no vi que exista forma de romper la relación que existe entre el componente Modal y los estilos globales antd.css, decidí modificar ese CSS.

Para modificarlo hay que buscar el archivo dentro de la carpeta node_modules (la ruta exacta sería node_modules/antd/dist/antd.css). Una vez dentro de ese CSS, debemos asegurarnos de eliminar todos los selectores globales que afecten al HTML, Body, *, etc.

A mí puntualmente no me agradaban los estilos que les aplicaba a los H1, H2, H3 y demás cabeceras. Así que borré también esos estilos.

Al eliminar todos esos selectores, nos quedarán en antd.css solo las clases de Ant Design que deseamos usar. Por lo tanto no perderemos la funcionalidad de sus componentes, y además no se aplicarán todos sus estilos globales.

Pero esto no termina aquí. Para implementar esta solución de forma completa debemos trasladar el archivo antd.css de lugar.

Esto es necesario porque por ejemplo si queremos subir nuestro proyecto a GitHub, los cambios que hayamos hecho en el archivo antd.css no se guardarán debido a que todo lo que está en node_modules está también dentro del gitignore. Y tampoco tenemos garantía de que funcione bien cuando intentemos pasar ese CSS modificado a nuestra versión de producción.

Así que la forma de solucionar eso es poniendo a antd.css fuera de node_modules y luego importarlo desde su nueva ubicación.

Lo importaríamos de una forma parecida a esta:

import './carpetaDeEstilosFueraDeNodeModules/antd.css';

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.