Dynamic css classes in react

Question

I'm trying to add css classes dynamically.

I have a array of colors that i want to get random color each time component rendered.

Here is what i did :

import styles from './UsersBoxItem.module.scss'
let colors = ['red', 'blue', 'green', 'pink', 'orange'];

class UsersBoxItem extends Component {
    render() {
        let colorClass = colors[Math.floor(Math.random() * colors.length)];
        colors = colors.filter(item => item !== colorClass)
        return (
            <div className={`${styles.box} ${styles.colorClass}`}>

I'm using css-modules but this ${styles.colorClass} won't work and i got undefined.

Here's my code : https://codesandbox.io/embed/cocky-cloud-lomzr

Any ideas ? Thanks

but something like this won't work ? .box { width: 35%; &.green{ background: linear-gradient(to bottom right, $success 40%, $secondary 100%); } } @NicolòCozzani — Enzo
– Enzo, Commented Sep 9, 2019 at 13:05
Can you create a minimal reproducible example, on StackBlitz or CodeSandbox? — dance2die
– dance2die, Commented Sep 9, 2019 at 13:20
Why do you have colors = colors.filter(item => item !== colorClass) line? — Talgat Saribayev
– Talgat Saribayev, Commented Sep 9, 2019 at 13:40

Talgat Saribayev · Accepted Answer · 2019-09-09 13:55:50Z

3

@Sung M. Kim solution work ok, I do not think that what do you want.

https://codesandbox.io/s/thirsty-lewin-k3j1y

answered Sep 9, 2019 at 13:55

Talgat Saribayev

1,93813 silver badges19 bronze badges

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

1 Comment

dance2die Over a year ago

I see what you are trying to do now @Enzo.

dance2die · Accepted Answer · 2019-09-09 13:38:28Z

1

You'd need to add actual class declarations in your CSS.

.red {
  color: red;
}
.blue {
  color: blue;
}
.green {
  color: green;
}
.pink {
  color: pink;
}
.orange {
  color: orange;
}

Forked sandbox

answered Sep 9, 2019 at 13:38

dance2die

37.2k39 gold badges137 silver badges199 bronze badges

1 Comment

Enzo Over a year ago

but in local scss file it's not possible ?

Collectives™ on Stack Overflow

Dynamic css classes in react

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related