How to use dynamic class values like disabled or active with theme-ui?

Question

So, I am using theme-ui and its theming capabilities, but i am new at it.

In my old way, I would just use package classNames and dynamically add styles depending on props or state etc..

ala...

        const btnStyles = cn('plainButton', {
          [styles.active]: isActive,
          [styles.disabled]: isDisabled,
        });

So, as you can see - I could update the button based on props. How would i do this wit theme-ui?

How do I had a dynamic disabled or say "active" state to a button or div or whatever using theme-ui. How do I achieve that? Would i have to declare a theme type in my theme.js file, or us "jx" to override?

Any examples?

Answer 1

You can define the style of disabled and active state in theme.buttons object :

// example theme variants
{
 buttons: {
   primary: {
     color: 'background',
     bg: 'primary',
     '&:disabled': {
       //your style
     },
     '&:active': {
       //your style
     }
   }
 }
}

For more