selectores - ¿Cómo aplicar estilos globales con módulos CSS en una aplicación de reacción?
selectores css (3)
Actualmente estoy usando Módulos CSS con React para mi estilo. Así que cada uno de mis componentes está importando en su archivo css específico del componente, así:
import React from ''react'';
import styles from ''./App.css'';
const example = () => (
<div className={styles.content}>
Hello World!
</div>
);
export default example;
Esto funciona bien al estilizar componentes individuales, pero ¿cómo aplico un estilo global (html, cuerpo, etiquetas de encabezado, divs, etc.) que no sea específico para cada componente?
Como está usando la sintaxis de importación de ES6, puede usar la misma sintaxis para importar su hoja de estilo
import ''./App.css''
Además, puede envolver su clase con :global para cambiar al ámbito global (esto significa que el Módulo CSS no lo modula, por ejemplo: agregando una identificación aleatoria a su lado)
:global(.myclass) {
background-color: red;
}
Esto se puede hacer simplemente agregando:
require(''./App.css'');
(Gracias @elmeister que respondió correctamente esta pregunta.)
La única forma que encontré para importar estilos globalmente, pero solo para una ruta específica es agregar:
<style dangerouslySetInnerHTML={{__html: `
body { max-width: 100% }
`}} />
Dentro de la devolución del método de render .
De lo contrario, la etiqueta de style se agregaría a <head> , y los estilos se aplicarían a todas las rutas siguientes.
De https://medium.learnreact.com/the-style-tag-and-react-24d6dd3ca974
Tal vez los estilos podrían importarse como una cadena de un archivo para tener el código más organizado.