ReactJS: Extend, Override CSS class

Question

I want to

import a style class from a CSS file
dynamically extend or override the style
Apply the new style to react component.

Pseudocode of what I want to achieve

import 'common.css'

function MyComponent() {

    if (somethingHappened) {
        style = extendOverrideStyle(styleClassFromCSS)
    } else {
        style = styleClassFromCSS
    }

    return (
        <SomeComponent className=style />
    )
}

How can I do this?

Update: Check my answer in the replies for how I finally did this.

Why don't you add a class and based on it change the styling? — Aslam
– Aslam, Commented Dec 19, 2019 at 10:39

funnydman · Accepted Answer · 2019-12-19 11:14:51Z

2

Just create a new class in your CSS file to override the old CSS. Then do it as

function MyComponent() {
    return (
        <div className={somethingHappened ? 'firstclass overwriteclass' : 
       'firstclass'}>
        <SomeComponent />
      </div>
    )
}

edited Dec 19, 2019 at 11:14

funnydman

11.8k4 gold badges51 silver badges67 bronze badges

answered Dec 19, 2019 at 10:42

Rohan

714 bronze badges

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

Comments

Tech Sourav · Accepted Answer · 2019-12-19 10:42:58Z

0

You can't set style in Component Directly. First you need to pass the style as prop to your Component and set style inside that component

<SomeComponent prop_class={your_style}/>

Inside SomeComponent

<div className={this.props.your_style}>

</div>

answered Dec 19, 2019 at 10:42

Tech Sourav

1342 silver badges7 bronze badges

Comments

Kiran Mohan · Accepted Answer · 2019-12-20 06:35:26Z

Answer (implementation somewhat similar to @Rohan's answer):

The main css class is the base style rules and .main.somethingHappened extends/overrides it. The main css class is applied to myComponent initially. When somethingHappened is true, apply both css classes main somethingHappened to myComponent.

mystyle.css

.main {
   ...
   margin: 10px;
}

.main.somethingHappened {
   margin: 5px
   padding: 5px;
}

myComponent.js
(uses classnames library. check @Rohan's approach to avoid classnames library.)

import 'common.css'
import classnames from 'classnames'

function MyComponent() {

    let didItHappen = ...

    return (
        <SomeComponent 
           className={classnames('main', {'somethingHappened': didItHappen})} 
        />
    )
}

Collectives™ on Stack Overflow

ReactJS: Extend, Override CSS class

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