migueloop migueloop - 1 month ago 10
React JSX Question

How to switch css class with CSSComponents

I have an element with

className={this.props.shapeType}


Now this
shapeType
changes to
Square
and
Diamond
, so the result is
class="square"
or
class="diamond"


The thing is that I´m using
CSSComponents
so to get a class from my .css I have to do:

className={s.NameOfTheClass}


where s comes from
import s from ./someStyle.css


So square and diamond are not being applied and I can´t make:

className={s.this.props.shapeType}


Any suggestion?

Answer

Import all classes in s

import * as s from './someStyle.css';

and then use s object with className as key to get class:

s[this.props.shapeType]