CODEWITHSUNDEEP
cssreactjs
meena
meena

Reputation: 93

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

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

Upvotes: 1

Views: 4503

Answers (3)

PhoenixPan
PhoenixPan

Reputation: 551

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

Upvotes: 1

Mark Rabey
Mark Rabey

Reputation: 1405

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.

Upvotes: 0

RickTakes
RickTakes

Reputation: 1197

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.

Upvotes: 0

Related Questions