How to change the styling of a component in another component ? React

Question

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 ?

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