Ndtyjky

I have my "App-component" and a "B-component" that gets rendered inside my app component. Each has its own style.

But when it gets compiled, my ComponentB.css is put before my app.css, making the ComponentB styles being overwritten by my app styles.

Why is this happening??

APP

 import React, { Component } from 'react';

 import ComponentB from './components/ComponentB';

import './styles/app.css';



    class App extends Component {

      render() {

        return (

          <div className="App">

            <ComponentB />

          </div>

        );

      }

    }



    export default App;

COMPONENT B

import React, { Component } from 'react';

import './styles/ComponentB.css';



class ComponentB extends Component {

  render() {

    return (

      <div>

        <h1>Hello from ComponentB</h1>

      </div>

    );

  }

}



export default ComponentB;

The way you do it results in a styles conflicts(one style overwriting another style), because after React compiles your code you are still using the same selectors for the same classes.
If you want to use different css files for different components while using the same class names, you should use CSS modules.

This will make your CSS class names scoped locally by default.