CODEWITHSUNDEEP
cssreactjs
Kiran Mohan
Kiran Mohan

Reputation: 3016

ReactJS: Extend, Override CSS class

I want to

  1. import a style class from a CSS file
  2. dynamically extend or override the style
  3. 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.

Upvotes: 0

Views: 2388

Answers (3)

Kiran Mohan
Kiran Mohan

Reputation: 3016

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})} 
        />
    )
}

Upvotes: 0

Rohan
Rohan

Reputation: 71

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>
    )
}

Upvotes: 2

Tech Sourav
Tech Sourav

Reputation: 134

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>

Upvotes: 0

Related Questions