Radix Homepage
Radix Homepage
主题主题基础组件基础组件图标图标颜色颜色
文档演练博客
Components

主题

封装全部或部分 React 树以提供主题配置。

View sourceReport an issue

API 参考

¥API Reference

有关主题的概述，请参阅 概览页面。

¥For an overview of theming see the overview page.

PropTypeDefault
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%"

示例

¥Examples

基本配置

¥Basic configuration

在 Theme 组件中封装一个组件树，以便为所有子组件提供或修改配置。

¥Wrap a component tree in the Theme component to provide or modify configuration for all children.

Feedback
<Box maxWidth="400px">

	<Card size="2">

		<Flex direction="column" gap="3">

			<Grid gap="1">

				<Text as="div" weight="bold" size="2" mb="1">

					Feedback

				</Text>

				<TextArea placeholder="Write your feedback…" />

			</Grid>

			<Flex asChild justify="between">

				<label>

					<Text color="gray" size="2">

						Attach screenshot?

					</Text>

					<Switch size="1" defaultChecked />

				</label>

			</Flex>

			<Grid columns="2" gap="2">

				<Button variant="surface">Back</Button>

				<Button>Send</Button>

			</Grid>

		</Flex>

	</Card>

</Box>

嵌套

¥Nesting

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

¥Nest another theme to modify configuration for a specific subtree. Configuration is inherited from the parent.

Global
Feedback
Child
Feedback
Grandchild
Feedback
<Card size="2">

	<Flex gap="6">

		<Flex direction="column" gap="3">

			<Heading as="h5" size="2">

				Global

			</Heading>

			<Grid gap="1">

				<Text as="div" weight="bold" size="2" mb="1">

					Feedback

				</Text>

				<TextArea placeholder="Write your feedback…" />

			</Grid>

			<Button>Send</Button>

		</Flex>



		<Theme accentColor="cyan" radius="full">

			<Card size="2">

				<Flex gap="6">

					<Flex direction="column" gap="3">

						<Heading as="h5" size="2">

							Child

						</Heading>

						<Grid gap="1">

							<Text as="div" weight="bold" size="2" mb="1">

								Feedback

							</Text>

							<TextArea placeholder="Write your feedback…" />

						</Grid>

						<Button>Send</Button>

					</Flex>



					<Theme accentColor="orange">

						<Card size="2">

							<Flex direction="column" gap="3">

								<Heading as="h5" size="2">

									Grandchild

								</Heading>

								<Grid gap="1">

									<Text as="div" weight="bold" size="2" mb="1">

										Feedback

									</Text>

									<TextArea placeholder="Write your feedback…" />

								</Grid>

								<Button>Send</Button>

							</Flex>

						</Card>

					</Theme>

				</Flex>

			</Card>

		</Theme>

	</Flex>

</Card>

组件覆盖

¥Component overrides

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

¥Override configuration per component by passing any supported prop directly to that component.

Feedback
<Box maxWidth="400px">

	<Card size="2">

		<Flex direction="column" gap="3">

			<Grid gap="1">

				<Text as="div" weight="bold" size="2" mb="1">

					Feedback

				</Text>

				<TextArea placeholder="Write your feedback…" />

			</Grid>

			<Flex asChild justify="between">

				<label>

					<Text color="gray" size="2">

						Attach screenshot?

					</Text>

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

				</label>

			</Flex>

			<Grid columns="2" gap="2">

				<Button variant="surface">Back</Button>

				<Button color="cyan" radius="full">

					Send

				</Button>

			</Grid>

		</Flex>

	</Card>

</Box>
Previous插槽
Next视觉隐藏