全局变体

Joy UI 提供了一组全局变体，以确保您的应用程序风格一致。

所有 Joy UI 组件都接受四种全局变体：solid、soft、outlined 和 plain。这些变体旨在涵盖现代网页设计中的大多数用例。

下面的演示展示了这些变体在几个 Joy UI 组件中的外观和感觉

Button

Chip

Solid

Soft

Outlined

Plain

Checkbox

SolidSoftOutlinedPlain

全局变体从单一来源提取其样式，帮助您确保预构建的 Joy UI 组件和您构建的任何自定义组件之间外观和感觉一致。

在底层，变体主要通过其 color、background 和 border CSS 属性的值来区分。

重要性层级

每个变体在用户界面中传达不同的重要性级别

solid 最适合页面上的主要元素和最重要的操作
soft、outlined 和 plain 更适合次要和三级操作

您应该选择哪个变体很大程度上取决于设计中的上下文，但为了平衡的 UI，记住这种层级结构非常重要。

下面的演示展示了使用多种变体实现的良好平衡设计

照片上传

自定义全局变体

全局变体构建于调色板的原子 tokens 之上，这些 tokens 存在于应用程序的主题中。您可以使用标准 CSS 或 CSS 变量来自定义这些属性。

这是一个 solid 变体的默认 tokens 示例

{
  colorSchemes: {
    light: {
      palette: {
        primary: {
          solidBg: 'var(--joy-palette-primary-600)',       // the initial background
          solidColor: '#fff',                              // the initial color
          solidHoverBg: 'var(--joy-palette-primary-700)',  // the :hover background
          solidActiveBg: 'var(--joy-palette-primary-800)', // the :active background
          // ...other tokens
        },
        neutral: {
          solidBg: 'var(--joy-palette-primary-700)',
          solidColor: '#fff',
          solidHoverBg: 'var(--joy-palette-primary-800)',
          solidActiveBg: 'var(--joy-palette-primary-900)',
          // ...other tokens
        },
        // ...other palettes
      }
    },
    dark: {
      palette: {
        // similar structure but different values
      }
    },
  }
}