CODEWITHSUNDEEP
javascriptcssreactjs
Mohammed Alswailem
Mohammed Alswailem

Reputation: 122

How to avoid CSS conflicts inside React components?

I have a React project which has two pages and each page has its own css file.

Page1.jsx -> Page1.css
Page2.jsx -> Page2.css

Each css file is only included in its corresponding jsx file. Both css files share similar class names (example: column, image-place, etc.). The problem is that Page1 is affected by Page2's CSS file.

I am not expert in front-end technologies. Any help will be appreciated.

Upvotes: 5

Views: 1137

Answers (2)

Youssouf Oumar
Youssouf Oumar

Reputation: 46291

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 sass --save-dev

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>)

And 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.

Upvotes: 1

Andara
Andara

Reputation: 618

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>

Upvotes: 3

Related Questions