如何使用动态类值，如disabled或active with theme-ui？

Question

所以，我正在使用theme-ui和它的主题功能，但我还是个新手。

在我的老方法中，我只会使用包classNames，并根据属性或状态等动态添加样式。

阿拉。

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

所以，正如你所看到的-我可以根据道具更新按钮。我该如何做这个wit主题-ui呢？

如何使用theme-ui对按钮或div或其他任何东西设置动态禁用或说“活动”状态。我该如何做到这一点？我是否必须在我的theme.js文件中声明一个主题类型，或者我们使用"jx“来覆盖？

有什么例子吗？

Answer 1

您可以在theme.buttons对象中定义禁用和活动状态的样式：

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

对于more