Creé una nueva aplicación React.js usando create-react-app .
Para cada componente (por ejemplo src/components/ComponentX.js ), he creado una hoja de estilo separada ( src/styles/ComponentX.css ) y la he importado de la siguiente manera: import "../styles/ComponentX.css" .
Esto, a su vez, ha resultado en una sección <style>...</style> separada para cada hoja de estilo importada en cada página. Por lo tanto, las hojas de estilo son globales (¿lo que tiene sentido para SPA?), aunque no están concatenadas como se describe aquí :
En desarrollo, expresar las dependencias de esta manera permite que sus estilos se vuelvan a cargar sobre la marcha a medida que los edita. En producción, todos los archivos CSS se concatenarán en un solo archivo .css minimizado en la salida de compilación.
Dado que no parece afectar la funcionalidad de la aplicación React.js, donde se importan las hojas de estilo, ¿dónde debo importar mis hojas de estilo? ¿Local a los componentes o en src/index.js ?
Bonificación : ¿Qué pasa con los componentes que comparten la misma hoja de estilo? ¿Deberían ambos importarlo, si siguen el enfoque local?
En general, recomendaría importarlos localmente, ya que esto le permitirá introducir más tarde la división de código por página si lo desea, mientras que no veo ninguna ventaja en importarlos en la raíz de su aplicación.
Este enfoque también debería facilitar la detección de cuándo se olvidó de importar una de sus hojas y le permite no tener que editar siempre un archivo adicional (su archivo de entrada) al agregar un componente.
Sin embargo, también le sugiero que eche un vistazo a los componentes con estilo , una biblioteca para alinear sus estilos junto con sus componentes.
Este es un tipo de pregunta más arquitectónica. Importar CSS con su módulo está bien. Hay todo un debate entre CSS-in-JS (lo que estás haciendo ahora) y CSS tradicional.
Por lo tanto, las hojas de estilo son globales.
CSS es global. Si desea definir el alcance de su CSS, utilice algún tipo de técnica como BEM o módulos CSS de tecnología completamente diferente que generarán nombres de clase únicos para sus componentes.
También está perfectamente bien tener un archivo CSS central (como index.css o styles.css ) donde importa todos los demás archivos CSS. Luego, solo importa este archivo CSS central en un lugar y, a su vez, importará otras hojas de estilo.
En realidad, ese es mi enfoque preferido, pero tiene algunas desventajas, por ejemplo, cargar dinámicamente la hoja de estilo solo cuando se carga el componente, etc.
Si tiene estilos globales que se aplicarán en toda la aplicación. Póngalo en App.css o a nivel global. De lo contrario, para cada componente, cree una carpeta como Página de inicio -> En eso, cree Homepage.jsx y Homepage.styles.scss, será mejor. De lo contrario, use el componente con estilo sin necesidad de importar