How do i use different css files for different components React with same class names

Question

I am using scss and creating final css which is a combination of header footer etc components which remain the same across pages.

Say I have the below class and they are of the same names in two pages of mine say About us Component and Home page Component which different styles

.first-section {

}

import React from 'react'
import Header from './headers/Header'
import Footer from './footers/Footer'
import LeftDrawer from './LeftDrawer'

import '../../../../media/assets/css/landingpages/aboutus.css'

export default class AboutUs extends React.Component {
  render() {
    return (
      <div class="page-container">
        <LeftDrawer></LeftDrawer> 
        <div class="page-container-inner" id="about-us">
          <Header></Header>

          <article class="first-section text-center">
          </article>
          <Footer></Footer>
          {/*<!-- /.page-container-inner -->*/}
        </div>
        {/*<!-- /.page-container -->*/}
      </div>      
    )
  }
}

Similarily Home.jsx

import React from 'react'
import Header from './headers/Header'
import Footer from './footers/Footer'
import LeftDrawer from './LeftDrawer'

import '../../../../media/assets/css/landingpages/home.css'

export default class Home extends React.Component {
  render() {
    return (
      <div class="page-container">
        <LeftDrawer></LeftDrawer> 
        <div class="page-container-inner" id="about-us">
          <Header></Header>

          <article class="first-section text-center">
          </article>
          <Footer></Footer>
          {/*<!-- /.page-container-inner -->*/}
        </div>
        {/*<!-- /.page-container -->*/}
      </div>      
    )
  }
}

How do I prevent these from clashing in React? cz they are of same names

So, you want to use .first-section class but they should have different styles for different pages? — Nirmalya Ghosh
– Nirmalya Ghosh, Commented Jun 2, 2017 at 7:07

PhoenixPan · Accepted Answer · 2018-06-16 06:16:39Z

1

Use CSS Modules.

A simple example, in your JS file, you could do:

import styles from './local.css';

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

Then in your local.css, you need:

:local(.page-container) {
  border: 1px solid red;
}

This .page-container style won't affect other ones (even if they are nested).

Yet I know this solution is not trivial. If you need a simpler implementation, you may consider using a library, such as styled-components

answered Jun 16, 2018 at 6:16

PhoenixPan

6638 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

RickTakes · Accepted Answer · 2017-06-02 16:36:58Z

0

This can be handled using CSS specificity. Add a class to your page-container for each page.

<div class="page-container home">

and

<div class="page-container about">

Then in your CSS:

.first-section {
  /* your general .first-section styles */
}

.home .first-section {
  /* your home styles */
}

.about .first-section {
  /* your about styles */
}

The .home .first-section and .about .first-section blocks will not conflict and can override any general styles from .first-section. Just make sure they are ordered that way in your css.

answered Jun 2, 2017 at 16:36

RickTakes

1,1971 gold badge10 silver badges14 bronze badges

Comments

Mark Rabey · Accepted Answer · 2017-06-02 20:08:47Z

0

I use Webpack to bundle React, and use the css-loader with css modules. When I import my css, I assign it to a variable: `import styles from '../../whatever.css';

Then, when I applying a class name, you use styles.class or styles['class']: <article className={ styles['first-section'] }>.... With css modules configured, this actually results in the class being something like Home__first-section--kfoia8, by pre-pending the component name, and appending a random hash. Check out the css-loader docs.

answered Jun 2, 2017 at 20:08

Mark Rabey

1,41510 silver badges11 bronze badges

Collectives™ on Stack Overflow

How do i use different css files for different components React with same class names

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related