Themes
Advanced
Utils
Components

Theme

React 트리를 전체 또는 일부 감싸서 테마 구성을 제공합니다.

View sourceReport an issue

API Reference

테마에 대한 개요는 개요 페이지를 참조하세요.

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 컴포넌트로 구성 요소 트리를 감싸서 모든 자식에 대한 구성을 제공하거나 수정합니다.

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

특정 하위 트리에 대한 구성을 수정하기 위해 다른 테마를 중첩합니다. 구성은 부모로부터 상속됩니다.

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

지원되는 prop을 해당 컴포넌트에 직접 전달하여 구성 요소별로 구성을 오버라이드합니다.

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>
PreviousSlot
NextVisually Hidden
Edit this page on GitHub.