包裹整个或部分 React 树以提供主题配置。
有关主题的概述，请参见 概述页面。
| 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 组件中，以提供或修改所有子组件的配置。
<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>
嵌套另一个主题以修改特定子树的配置。配置会从父级继承。
<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>
通过将任何支持的属性直接传递给该组件来覆盖每个组件的配置。
<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>