Tengo un proyecto React que tiene dos páginas y cada página tiene su propio archivo css.
Page1.jsx -> Page1.css Page2.jsx -> Page2.css Cada archivo css solo se incluye en su archivo jsx correspondiente. Ambos archivos css comparten nombres de clase similares (ejemplo: column , image-place , etc.). El problema es que la Page1 se ve afectada por el Page2 CSS de la página 2.
No soy experto en tecnologías front-end. Cualquier ayuda será apreciada.
¿Estás usando crear-reaccionar-aplicación?
Si es así, use módulos css en su lugar https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/
Los módulos CSS permiten el alcance de CSS mediante la creación automática de un nombre de clase único
//Page1.jsx import React from 'react'; import styles from './page1.module.css'; // Import css modules stylesheet as styles export const Page1 = () => { return ( <div className={styles.column}>page1</div> ) } /* page1.module.scss */ .column { color: red } //Page2.jsx import React from 'react'; import styles from './page2.module.css'; // Import css modules stylesheet as styles export const Page2 = () => { return ( <div className={styles.column}>page2</div> ) } /* page2.module.scss */ .column { color: green }Si desea combinarlos con una clase css normal o externa (bootstrap, tailwind, etc.), intente esto:
<div className={`${styles.column} overflow-auto`}>page1</div>Una posible forma de evitar conflictos es usar Sass . Puede configurarlo escribiendo en el terminal de la carpeta de su aplicación de react :
npm i sass --save-dev Luego transforme todos los archivos .css a .scss . Agregue una class única en el contenedor de nivel superior de cada página, por ejemplo:
retrun (<div className = "pageOne"> <img src = "/myImage" className = "image-place"/> </div>)Y finalmente tus estilos se verán así:
.pageOne { .image-place { width:200px } .column { width:200px } } De esta manera, tendría una class única en el contenedor de nivel superior y tantas como class que tengan el mismo nombre.