¿Cómo puedo cambiar el comportamiento de uso compartido de React de un archivo CSS externo en React, para poder configurar el fondo del cuerpo de manera diferente para diferentes componentes?
iniciar sesión.css
body { background-image: url('../../../images/bannerbackground.png'); }casa.css
body { background-color: rgb(185, 174, 160); }pero por el comportamiento de compartir de react con los componentes de la misma raíz no puedo diferenciarlo, ¿hay alguna solución?
Sí, hay una solución. Es bastante simple. Para evitar los conflictos, puede implementar módulos CSS. Cambie el nombre de sus archivos CSS a filename.module.css
Resultado:
// note the classname generated <button class="Button_error_ax7yz">Error Button</button>De acuerdo con el repositorio oficial, los módulos CSS son "archivos CSS en los que todos los nombres de clases y animaciones tienen un alcance local predeterminado". ¿Qué significa esto? Los módulos CSS no son especificaciones ni una implementación en el navegador, sino más bien un proceso en un paso de compilación (con la ayuda de Webpack o Browserify) que cambia los nombres de las clases y los selectores para que tengan alcance (algo así como un espacio de nombres)