CODEWITHSUNDEEP
reactjsreact-bootstrap
barath thangam
barath thangam

Reputation: 113

Other component styles are getting applied to the component which I have not imported

Hello I am working on simple crud application in react js 18.0.0. My problem is I have my own styles for one component say eg..Home. But the styles which I have used for other components is also getting applied to Home component even though I did not imported it. Can anyone explain why?

I have attached an image for your reference.
enter image description here
In the above image I was in home component. But if you see the styles the container class in forgetPassword.css and login.css is also getting applied in home component. but In home component I did not imported those two css files(forgetPassword.css and login.css)

Upvotes: 0

Views: 1160

Answers (1)

vineeth pappu
vineeth pappu

Reputation: 542

Yes this is because by default react does not support css or styles.

you can either use css modules(https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/)

Or

Use styled components.

I suggest you to try the css modules as that will be beginner friendly and easy.

You need to move your css to seperate file and name it [filename].module.css

In your case Home.module.css

Then in your Home.js component import it like import styles from './Home.module.css'

Then in your component use it like

<div className={styles.container} > ... </div>

I also recommend you not to modify the original bootstrap classes, instead create your custom class and add the overrides there.

eg:

<div className={`${styles.container} ${styles.home-container}`} > ... </div>

Upvotes: 1

Related Questions