How to conditionally render css with clsx?

Question

I have a button component that's supposed to change colors based on its status (passed in by props). The colors are stored in a css file. I read that the clsx npm is a good one to use, but I don't quite understand its documentation. How do I use clsx to conditionally render my button?

  import  colors from './colors.css'

  <MyButton
        className={cx( )} //<------ ???
      />

and my colors.css file:

.accept {
  background-color: green
}

.reject {
  background-color: red
}

.warning {
  background-color: orange
}

Try not to miss out the semicolons: https://stackoverflow.com/questions/11939595/leaving-out-the-last-semicolon-of-a-css-block — Raptor, Oct 19 '20 at 01:51

score 2 · Answer 1 · answered Oct 16 '20 at 08:36

2

You can try this

<MyButton className={clsx({ 'your-class-name': yourConditional })} />

If your class is a variable, you can add inside [].

<MyButton className={clsx({ [yourClassName]: yourConditional })} />

answered Oct 16 '20 at 08:36

Keit Oliveira

21
3

How to conditionally render css with clsx?

1 Answers1