入门

安装 Radix 主题并在几分钟内开始构建。

Radix 主题是一个预先样式化的组件库，旨在与最少的配置开箱即用。如果您正在寻找无样式组件，请访问 Radix 基础组件。

安装

启动和运行很快且容易。

1. 安装 Radix 主题

从命令行安装包。

npm install @radix-ui/themes

2. 导入 CSS 文件

在应用程序根目录导入全局 CSS 文件。

import '@radix-ui/themes/styles.css';

3. 添加 Theme 组件

将 Theme 添加到您的应用程序中，将根组件包装在 body 内。

import { Theme } from '@radix-ui/themes';

export default function () {
  return (
    <html>
      <body>
        <Theme>
          <MyApp />
        </Theme>
      </body>
    </html>
  );
}

4. 开始构建

您现在可以使用 Radix Themes 组件了。

import { Flex, Text, Button } from '@radix-ui/themes';

export default function MyApp() {
  return (
    <Flex direction="column" gap="2">
      <Text>Hello from Radix Themes :)</Text>
      <Button>Let's go</Button>
    </Flex>
  );
}

自定义主题

配置通过 Theme 组件进行管理和应用。

基本配置

将配置传递给 Theme 以自定义外观。

<Theme accentColor="crimson" grayColor="sand" radius="large" scaling="95%">
  <MyApp />
</Theme>

使用主题面板

ThemePanel 是一个可直接使用的组件，允许您实时预览主题。访问组件游乐场以查看其实际效果。

要将 ThemePanel 添加到您的应用程序，请从包中导入它，并将其放置在您的根 Theme 内。

import { Theme, ThemePanel } from '@radix-ui/themes';

export default function () {
  return (
    <Theme>
      <MyApp />
      <ThemePanel />
    </Theme>
  );
}