时间戳

首页 > 解决方案 > 带有 Theme-UI 的多个变体

reactjs - 带有 Theme-UI 的多个变体

问题描述

我正在尝试学习如何使用Theme-UI （由制作Styled-System和Rebass的同一个人制作）。就像在 Styled-System（和 Rebass）中一样，有一个主题文件可以选择创建变体（有关详细信息，请参见此处： https ://theme-ui.com/theme-spec/#variants ）。

因此，例如，我可以创建不同样式的按钮——像这样：

buttons: {
    primary: {
      // you can reference other values defined in the theme
      color: 'white',
      bg: 'primary',
    },
    secondary: {
      color: 'text',
      bg: 'secondary',
    },
  }

然后我可以按如下方式使用这些变体：

<button
  sx={{
    variant: 'buttons.primary',
  }}>

问题是，我希望能够为按钮创建多个变体。例如，假设我想要以下三个变体：

  1. 尺寸（小、中、大等）。
  2. 看（主要、次要、禁用等）。
  3. 种类（默认、大纲、文本等）。

这样我就可以设置这样的按钮样式：

<button
 sx={{
    size="buttons.size.large"
    kind="buttons.kind.outline"
    look="buttons.look.secondary"
 }}
/>

这对于样式系统是可能的——这里是一个例子：

但我不知道如何使用 Theme-UI。

有谁知道如何使用 Theme-UI 做到这一点？

标签： reactjsstyled-componentsemotion

解决方案

推荐阅读