I have a react project which has two pages and each page has its own css file.
1- Page1.jsx -> Page1.css
2- Page2.jsx -> Page2.css
Each css file is only included in its corresponding jsx file. Both css files share similar class name (example: column, image-place, etc.)
The problem is Page1 is affected by Page2 CSS file.
I am not expert in front-end technologies. Any help will be appreciated.
CodePudding user response:
Are you using create-react-app?
If so, use css-modules instead https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/
CSS Modules allows the scoping of CSS by automatically creating a unique classname
//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
}
If you want to combine them with normal or external css class (bootstrap, tailwind, etc), try this:
<div className={`${styles.column} overflow-auto`}>page1</div>
CodePudding user response:
A possible way to avoid conflicts is to use Sass. You can set it up by typing in your react
app folder terminal
:
npm i node-sass --save
Then transform all .css
files to .scss
. Add a unique class
on the top level wrapper of each page, for example :
retrun (<div className = "pageOne">
<img src = "/myImage" className = "image-place"/>
</div>)
An finally your styles will look like this :
.pageOne {
.image-place {
width:200px
}
.column {
width:200px
}
}
This way, you would have one unique class
at the top level wrapper, and as many as class
that have the same name in them.