How to switch css class with CSSComponents

Question

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?

import * as s from './someStyle.css' and try: s[this.props.shapeType] — Pardeep Dhingra
– Pardeep Dhingra, Commented Oct 12, 2016 at 11:45

Pardeep Dhingra · Accepted Answer · 2016-10-12 12:07:01Z

1

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]

answered Oct 12, 2016 at 12:07

Pardeep Dhingra

3,9467 gold badges35 silver badges57 bronze badges

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

1 Answer 1