Tengo varios componentes que tienen la siguiente estructura CSS/componente
About/style.css
.AboutContainer { # Some style } p > code { # Some style }E importo el CSS en el componente de la siguiente manera
About/index.js
import './style.css'; export default class About extends Component { render() { # Return some component } } Sin embargo, el CSS se importa en la sección <header> y permanece en el ámbito global.
Esperaba que CSS fuera:
Sin embargo, al inspeccionar desde el navegador, los estilos se especifican en la sección <header> y se aplican a todos los componentes.
<header> // Stuff <style type="text/css">style for component About</style> <style type="text/css">style for component B</style> <style type="text/css">style for component C</style> // Stuff </header>¿Cómo importo CSS para que tenga un alcance de componente? Parece que estoy entendiendo la importación de CSS en React ES6 incorrectamente.
estaba siguiendo este tutorial
Editar
La respuesta de Brett es correcta. Sin embargo, mi problema resulta estar en otra parte. Creé mi aplicación usando create-react-app que básicamente simplifica las configuraciones necesarias para hacer React. Incluye WebPack, Babel y otras cosas para empezar. La configuración predeterminada de WebPack que utiliza no estableció la opción de módulo para css-loader , por lo que se estableció de manera predeterminada en false y, como resultado, el alcance local no estaba habilitado.
Solo para obtener información adicional, parece que create-react-app no tiene una forma sencilla de personalizar la configuración de WebPack, pero parece haber numerosas soluciones prácticas en la web.
Parece que CSS Modules , o muchos de los otros paquetes CSS-in-JS, hacen lo que quieres. Otros incluyen Emoción (mi favorito actual), Componentes con estilo o muchos de los paquetes aquí .
Un módulo CSS es un archivo CSS en el que todos los nombres de clases y animaciones tienen un alcance local predeterminado. Todas las URL (url(...)) y @imports están en formato de solicitud de módulo (./xxx y ../xxx significa relativo, xxx y xxx/yyy significa en la carpeta de módulos, es decir, en node_modules).
He aquí un ejemplo rápido:
Digamos que tenemos un componente React como:
import React from 'react'; import styles from './styles/button.css'; class Button extends React.Component { render() { return ( <button className={styles.button}> Click Me </button> ); } } export default Button; y algo de CSS en ./styles/button.css de:
.button { border-radius: 3px; background-color: green; color: white; }Después de que los Módulos CSS realicen su magia, el CSS generado será algo como:
.button_3GjDE { border-radius: 3px; background-color: green; color: white; } donde _3DjDE es un hash generado aleatoriamente, lo que le da a la clase CSS un nombre único.
Una alternativa
Una alternativa más sencilla sería evitar el uso de selectores genéricos (como p , code , etc.) y adoptar una convención de nomenclatura basada en clases para componentes y elementos. Incluso una convención como BEM ayudaría a prevenir los conflictos que está experimentando.
Aplicando esto a tu ejemplo, podrías ir con:
.aboutContainer { # Some style } .aboutContainer__code { # Some style }Esencialmente, todos los elementos que necesita diseñar recibirán un nombre de clase único.
Tal vez react-scoped-css ayude. Por cierto, soy el autor de esta biblioteca, si encuentra algo roto o simplemente quiere mejorarlo, siempre puede plantear un problema o enviar un pr.
Debido a que mencionó que usó create-react-app , la solución aquí es bastante fácil de cambiar simplemente style.css a style.module.css , se verá así:
import styles from "./style.module.css" <button className={styles.button}>blabla</button>Más información sobre este artículo: https://blog.bitsrc.io/how-to-use-sass-and-css-modules-with-create-react-app-83fa8b805e5e