0
179
Vistas¿Por qué React elige aleatoriamente una hoja de estilo diferente en lugar de la que importé?
Tengo una aplicación React con la siguiente estructura de carpetas.
Todas mis "páginas" tienen su propia carpeta con un archivo .jsx y un .css para diseñar la página.
Importé el CSS en HomePage.jsx como:
import '../HomePage/HomePageStyles.css'; //HomePage.jsxHasta ahora, todo está funcionando bien. Luego creé ChampionDetailPage.css y lo importé en ChampionDetailpage.jsx así.
import '../ChampionDetailPage/ChampionDetailPageStyles.css'; //ChampionDetailPage.jsxAhora las cosas empiezan a ponerse divertidas. HomePages.jsx de repente comienza a usar estilos de ChampionDetailpage.css que tienen los mismos nombres de clase sin ninguna razón obvia. Ocurre a la inversa, por lo que ChampionDetailPage.jsx también usa clases de HomePageStyles.css .
Por ejemplo, tengo la clase .content-right en ambos archivos .css
.content-right{ /* HomePage.css */ width: 55%; } .content-right{ /* ChampionDetailStyles.css */ display: flex; padding-right: 20px; flex-grow: 100; flex-direction: column; }En este caso, React de alguna manera diseña mi Homepage.jsx con ChampionDetailPages.css, que también es visible en las herramientas de desarrollo de Chrome.
¿Por qué sucede eso y cómo lo soluciono?
Cosas que ya probé:
Cambiar la importación, por ejemplo.
import './ChampionDetailPageStyles.css';Al lanzar el CSS en su propio directorio en ambos casos, ¡el problema sigue siendo el mismo!
Gracias por su ayuda de antemano.
1 Respuestas
Responde la pregunta0
No puede tener hojas de estilo con clases que se superponen entre sí.
Entonces, la clase que se toma en consideración es la que estaba en el css que se cargó por última vez. Es por eso que tienes cada una de las dos clases que se eligen al azar.
Lo que debe saber cuando importa un css de esta manera:
- Su contenido no está dentro del alcance de su archivo que importa este css.
- Se importará globalmente, y luego, las clases que se definen dentro se compartirán con cada contenido dom de su aplicación durante todo su ciclo de vida.
- No tienes control sobre el orden de importación de tu css a lo largo del tiempo.
Para resumir, la hoja de estilo en realidad no se selecciona al azar, es la que se carga la última que anula todas las clases que ya estaban definidas en el css previamente cargado.
Algo que debe saber, todo el css que importa en su aplicación cliente se carga TODO en el arranque.
Una mejor manera de administrar estilos con React es usar Emotion . Un framework que permite manejar css con tu programa, y también poder aplicar tus estilos a tu componente, o compartirlo con varios componentes.