reactjs - 如何使用主题 UI 中的禁用或活动等动态类值？

Question

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

以我的旧方式，我只会使用包 classNames 并根据道具或状态等动态添加样式。

翼...

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

所以，如您所见 - 我可以根据道具更新按钮。我将如何使用主题-ui 做到这一点？

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

有什么例子吗？

Answer 1

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

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

更多_