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.