# 主题

包裹整个或部分 React 树以提供主题配置。

## [API 参考](#api-参考)

有关主题的概述，请参见 [概述页面](/themes/docs/theme/overview)。

| Prop              | Type                                                 | Default          |
| ----------------- | ---------------------------------------------------- | ---------------- |
| `asChild`         | `boolean`                                            | No default value |
| `hasBackground`   | `boolean`                                            | `true`           |
| `appearance`      | `"inherit" \| "light" \| "dark"`                     | `"inherit"`      |
| `accentColor`     | `enum`                                               | `"indigo"`       |
| `grayColor`       | `enum`                                               | `"auto"`         |
| `panelBackground` | `"solid" \| "translucent"`                           | `"translucent"`  |
| `radius`          | `"none" \| "small" \| "medium" \| "large" \| "full"` | `"medium"`       |
| `scaling`         | `"90%" \| "95%" \| "100%" \| "105%" \| "110%"`       | `"100%"`         |

## [示例](#示例)

### [基本配置](#基本配置)

将组件树包裹在 `Theme` 组件中，以提供或修改所有子组件的配置。

```jsx
<Box maxWidth="400px">
  <Card size="2">
    <Flex direction="column" gap="3">
      <Grid gap="1">
        <Text as="div" weight="bold" size="2" mb="1">
          反馈
        </Text>

        <TextArea placeholder="写下您的反馈…" />
      </Grid>

      <Flex asChild justify="between">
        <label>
          <Text color="gray" size="2">
            附加屏幕截图?
          </Text>

          <Switch size="1" defaultChecked />
        </label>
      </Flex>

      <Grid columns="2" gap="2">
        <Button variant="surface">返回</Button>

        <Button>发送</Button>
      </Grid>
    </Flex>
  </Card>
</Box>
```

### [嵌套](#嵌套)

嵌套另一个主题以修改特定子树的配置。配置会从父级继承。

```jsx
<Card size="2">
  <Flex gap="6">
    <Flex direction="column" gap="3">
      <Heading as="h5" size="2">
        全局
      </Heading>

      <Grid gap="1">
        <Text as="div" weight="bold" size="2" mb="1">
          反馈
        </Text>

        <TextArea placeholder="写下您的反馈…" />
      </Grid>

      <Button>发送</Button>
    </Flex>

    <Theme accentColor="cyan" radius="full">
      <Card size="2">
        <Flex gap="6">
          <Flex direction="column" gap="3">
            <Heading as="h5" size="2">
              子组件
            </Heading>

            <Grid gap="1">
              <Text as="div" weight="bold" size="2" mb="1">
                反馈
              </Text>

              <TextArea placeholder="写下您的反馈…" />
            </Grid>

            <Button>发送</Button>
          </Flex>

          <Theme accentColor="orange">
            <Card size="2">
              <Flex direction="column" gap="3">
                <Heading as="h5" size="2">
                  孙组件
                </Heading>

                <Grid gap="1">
                  <Text as="div" weight="bold" size="2" mb="1">
                    反馈
                  </Text>

                  <TextArea placeholder="写下您的反馈…" />
                </Grid>

                <Button>发送</Button>
              </Flex>
            </Card>
          </Theme>
        </Flex>
      </Card>
    </Theme>
  </Flex>
</Card>
```

### [组件覆盖](#组件覆盖)

通过将任何支持的属性直接传递给该组件来覆盖每个组件的配置。

```jsx
<Box maxWidth="400px">
  <Card size="2">
    <Flex direction="column" gap="3">
      <Grid gap="1">
        <Text as="div" weight="bold" size="2" mb="1">
          反馈
        </Text>

        <TextArea placeholder="写下您的反馈…" />
      </Grid>

      <Flex asChild justify="between">
        <label>
          <Text color="gray" size="2">
            附加屏幕截图?
          </Text>

          <Switch size="1" color="orange" radius="full" defaultChecked />
        </label>
      </Flex>

      <Grid columns="2" gap="2">
        <Button variant="surface">返回</Button>

        <Button color="cyan" radius="full">
          发送
        </Button>
      </Grid>
    </Flex>
  </Card>
</Box>
```

<!--$-->

<!--/$-->