Theme

Theme

React 트리의 일부 또는 전체를 감싸서 테마 설정을 제공하는 컴포넌트예요.

출처: 문서

본문

앱 전체 또는 특정 하위 트리에 Radix Themes 설정을 적용하고 싶을 때 사용해요. Theme 컴포넌트로 감싸면 그 아래 모든 컴포넌트가 해당 테마 설정을 사용해요.

테마 개요는 overview page에서 확인할 수 있어요.

예시 (Examples)

Basic configuration

컴포넌트 트리를 Theme 컴포넌트로 감싸서 모든 자식에 대한 설정을 제공하거나 수정할 수 있어요.

<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

특정 하위 트리의 설정만 수정하려면 다른 theme를 중첩할 수 있어요. 설정은 부모로부터 상속돼요.

<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을 해당 컴포넌트에 직접 전달해 컴포넌트별로 설정을 덮어쓸 수 있어요.

<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>

더 알아보기 (Learn more)

• Theme을 중첩하면 특정 영역만 다른 색상/반경으로 꾸밀 수 있고, 컴포넌트에 직접 prop을 주면 부분적으로도 설정을 바꿀 수 있어요.