Tengo un componente de reacción que devuelve otro componente de reacción similar al que se muestra a continuación:
// Sample Code import React from 'react'; import Component from "./Component"; import "./styles1.css"; import "./styles2.css"; import "./styles3.css"; export default function Sample(props) { return <Component />; }Dos de los tres archivos CSS provienen de un paquete npm. Este componente se procesa en otras páginas que no son de reacción. Así que llamo a ReactDOM.render en este componente donde sea que esté renderizando.
Los problemas con este enfoque son:
ReactDOM.unmountComponentAtNode(document.getElementById(idSelector)) . Cuando esto sucede, los estilos todavía están en <head> , lo que hace que se distorsionen otros elementos en las páginas de consumo.He intentado los siguientes enfoques:
Usando este paquete react-scoped-css ( https://github.com/gaoxiaoliangz/react-scoped-css ) junto con Webpack que agrega un hash aleatorio al <Component/> lo que hace que el CSS tenga un alcance local. Esto no resolverá el problema de los estilos en cascada al consumir páginas.
Busque las etiquetas de estilo por XPath (document.evaluate) y elimine el elemento del documento. Pero esto eliminará los estilos por completo, por lo que cuando quiero renderizar el componente nuevamente, los estilos desaparecen.
Usar shadowDOM en las páginas de consumo con un div -> shadow host -> shadow root -> react-app root. Los estilos están encapsulados correctamente, pero los eventos de clic están dando problemas.
Es importante mencionar que las 2 hojas de estilo que provienen del paquete npm son extremadamente grandes y minificadas, por lo que no es viable cambiar los nombres de clase en el Componente para usar algo como Módulos CSS, CSS-in-JS o enfoques similares. ¿Hay algún otro enfoque que me permita abordar este problema sin cambiar los nombres de las clases? Esto ha sido realmente difícil porque la mayoría de las preguntas sugieren usar módulos CSS, CSS-in-JS, etc. para esto, lo que requerirá una gran revisión del código.
El Componente mencionado aquí es una base de código extremadamente grande que tiene muchos nombres de clases (aproximadamente ~10K LOC).