using a variable value on css modules class name

Question

I'm trying use use a variable in a class name with css modules in nextjs, but I'm having a bad time figuring out the right syntax.

my variable comes from the api:

const type = red

how i'm trying to do it:

The result that I expect:

is there a way to do it?

You mean styles[type]? You seem to be mixing up CSS variables with regular JavaScript variables. — juliomalves
– juliomalves, Commented Apr 10, 2021 at 23:59
i'm not using any css variables actually, I just want to use a variable value as a class name with css modules — Sku
– Sku, Commented Apr 11, 2021 at 0:47

Baldráni · Accepted Answer · 2021-04-11 08:27:02Z

7

Not sure what you are trying to achieve.

One solution could be to do :

const type = 'red';

<div className={`${styles.background} ${styles.type}`}></div>

However if you want to use BEM and the -- notation. You' might have to switch to brackets notation.

const type = '--red';

<div className={`${styles.background} ${styles[type]}`}></div>

answered Apr 11, 2021 at 7:58

Baldráni

5,6988 gold badges57 silver badges82 bronze badges

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

1 Comment

I believe the first solution still needs bracket notation around type