Importing styles for react components inherited?

Question

I have a question on the way react components interact with each other. My question is this: say I have a child component called About.js, and I also have some sass styles lets say about.scss, in my about component I do a require(./about.scss) and import the styles i need for my component.

When I render in a parent component, does the about.scss styles conflict with the styles present in the parent.scss file?

What is the best way to go about styling individual components and setting up the file structure?

Thanks!

Answer 1

Yes, when you import your SCSS file from your React file, what webpack does is it take your SCSS file and transform it into CSS file, and wraps up the content with the style tag and inject it into your page, so at the end of the day, your DOM will look like this:

<style>
// parent.css
.conflict{
  background: skyblue;
}
</style>

<style>
// about.css
.conflict{
  background: hotpink;
}
</style>

And most React developers prefer method of styling a component is using the inline-style

const App () => (
  <div
    style={{
      background: 'skyblue',
    }}
  >
  </div>
);