如何在主题-ui 中使用动态 class 值，例如禁用或激活？

Question

所以，我正在使用 theme-ui 及其主题功能，但我是新手。

按照我以前的方式，我只会使用包类名并根据道具或状态等动态添加样式。

阿拉...

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

因此，如您所见 - 我可以根据道具更新按钮。我将如何做这个机智主题-ui?

如何使用主题-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

如何在主题-ui 中使用动态 class 值，例如禁用或激活？

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

reactjs

rebass

theme-ui