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'),
);
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.