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
}

Answer 1

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 })} />