Styling

Radix Primitives는 스타일이 없고(unstyled) 어떤 스타일링 솔루션이든 호환되므로, 스타일링을 완전히 제어할 수 있어요.

출처: 문서

본문

Radix Primitives 자체는 스타일을 거의 포함하지 않아서, CSS·CSS-in-JS 등 원하는 어떤 방식으로든 자유롭게 스타일링할 수 있어요. 상태는 data-state 속성으로 노출되어 상태별 스타일을 쉽게 줄 수 있어요.

스타일링 개요

기능적 스타일

기능적 스타일을 포함한 모든 스타일링 측면을 여러분이 제어해요. 예를 들어 기본적으로 Dialog Overlay는 전체 뷰포트를 덮지 않아요. 그 스타일과 프레젠테이션 스타일을 추가하는 것은 여러분의 몫이에요.

클래스

모든 컴포넌트와 파트는 className prop을 받아요. 이 클래스는 DOM 요소로 전달되고 CSS에서 예상대로 사용할 수 있어요.

데이터 속성

컴포넌트가 상태ful하면 상태가 data-state 속성으로 노출돼요. 예를 들어 Accordion Item이 열리면 data-state="open" 속성을 포함해요.

CSS로 스타일링

파트 스타일링

제공한 className을 타겟팅해 컴포넌트 파트를 스타일링할 수 있어요.

import * as React from "react";

import { Accordion } from "radix-ui";

import "./styles.css";

export const AccordionDemo = () => (
  <Accordion.Root>
    <Accordion.Item className="AccordionItem" value="item-1" />

    {/* … */}
  </Accordion.Root>
);

상태 스타일링

data-state 속성을 타겟팅해 컴포넌트 상태를 스타일링할 수 있어요.

.AccordionItem {
  border-bottom: 1px solid gainsboro;
}

.AccordionItem[data-state="open"] {
  border-bottom-width: 2px;
}

CSS-in-JS로 스타일링

아래 예시는 styled-components를 사용하지만, 원하는 어떤 CSS-in-JS 라이브러리를 사용해도 돼요.

파트 스타일링

대부분의 CSS-in-JS 라이브러리는 컴포넌트와 스타일을 전달하는 함수를 내보내요. Radix primitive 컴포넌트를 직접 제공할 수 있어요.

import * as React from "react";

import { Accordion } from "radix-ui";

import styled from "styled-components";

const StyledItem = styled(Accordion.Item)`
  border-bottom: 1px solid gainsboro;
`;

export const AccordionDemo = () => (
  <Accordion.Root>
    <StyledItem value="item-1" />

    {/* … */}
  </Accordion.Root>
);

상태 스타일링

data-state 속성을 타겟팅해 컴포넌트 상태를 스타일링할 수 있어요.

import { Accordion } from "radix-ui";

import styled from "styled-components";

const StyledItem = styled(Accordion.Item)`
  border-bottom: 1px solid gainsboro;

  &[data-state="open"] {
    border-bottom-width: 2px;
  }
`;

primitive 확장하기

primitive를 확장하는 것은 일반 React 컴포넌트를 확장하는 것과 동일해요.

import * as React from "react";

import { Accordion as AccordionPrimitive } from "radix-ui";

const AccordionItem = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>((props, forwardedRef) => <AccordionPrimitive.Item {...props} ref={forwardedRef} />);

AccordionItem.displayName = "AccordionItem";

요약

Radix Primitives는 접근성 문제와 기타 복잡한 기능을 캡슐화하면서, 스타일링은 완전히 제어할 수 있도록 설계되었어요.

편의를 위해 상태ful 컴포넌트는 data-state 속성을 포함해요.

더 알아보기 (Learn more)

스타일이 없는 부품이라 CSS/CSS-in-JS/어떤 솔루션이든 자유롭게 사용할 수 있어요.
상태ful 컴포넌트는 data-state(예: data-state="open") 속성으로 상태를 노출해 상태별 스타일링을 쉽게 해 줘요.