0

First I apologize if this question has been answered elsewhere. I'm still learning.

Assuming we have a parent component that has children components inside of it, so :

in App.js:

 <>
        <Advertisement title="Free Shipping For Orders Above 150 USD ! " />
        <NavBar />
        <LandingSection />
        <Featured />
        <Explore />
        <Shop />
        <RecommendedVideos />
        <AsSeenOn />
        <Footer />
      </>

Now, we all know that each component has it own css file, however, if I want to change specific CSS attributes/styles to fit with the new component and I just want it in this specific component, in our case it is App.js. What should I do ? any tutorials on this topic ?

Also ... What is the difference between using

import styles from './styles.css 

className = {styles.someName}

and using

styled-components library ?

and most importantly, in professional/real-world apps, what method do developers use ?

Emad
  • 3
  • 3

1 Answers1

-1

Each component should use either css modules or styled component. That way style will be scoped to that component.

If you use plain css then it might clash with other components styles.

Shridhar Purandare
  • 1
  • 3
  • Any examples? illustrations? – Emad Nov 13 '22 at 07:08
  • For css modules, please find detailed example [here](https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/). For styled component basic examples is [here](https://styled-components.com/docs/basics) – Shridhar Purandare Nov 13 '22 at 21:27