Saltar al contenido

¿Cómo aplicar estilos globales con módulos CSS en una aplicación de reacción?

Solución:

Dado que está utilizando la sintaxis de importación de ES6, puede usar la misma sintaxis para importar su hoja de estilo

import './App.css'

Además, puedes envolver tu clase con :global para cambiar al alcance global (esto significa que el Módulo CSS no lo modificará, por ejemplo: agregar una identificación aleatoria al lado)

:global(.myclass) {
  background-color: red;
}

Esto se puede hacer simplemente agregando:

require('./App.css');

(gracias @elmeister que respondió correctamente a esta pregunta).

La única forma que encontré para importar estilos globalmente, pero solo para una ruta específica, es agregando:

<style dangerouslySetInnerHTML={{__html: `
  body { max-width: 100% }
`}} />

dentro del regreso de render método.

De lo contrario, el style la etiqueta se agregaría a la <head>, y los estilos se aplicarán a todas las próximas rutas.

De https://medium.learnreact.com/the-style-tag-and-react-24d6dd3ca974

Quizás los estilos podrían importarse como una cadena de un archivo para tener el código más organizado.

¡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 *