概要

import * as React from 'react';
import * as Accordion from '@radix-ui/react-accordion';
import './styles.css';

const AccordionDemo = () => (
  <Accordion.Root>
    <Accordion.Item className="AccordionItem" value="item-1" />
    {/* … */}
  </Accordion.Root>
);

export default AccordionDemo;

ステートのスタイリング

コンポーネントの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プリミティブコンポーネントを直接渡すことができます。

import * as React from 'react';
import * as Accordion from '@radix-ui/react-accordion';
import styled from 'styled-components';

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

const AccordionDemo = () => (
  <Accordion.Root>
    <StyledItem value="item-1" />
    {/* … */}
  </Accordion.Root>
);

export default AccordionDemo;

ステートのスタイリング

コンポーネントのdata-state 属性をターゲットにすることで、コンポーネントのステートをスタイリングできます。

import * as Accordion from '@radix-ui/react-accordion';
import styled from 'styled-components';

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

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

プリミティブの拡張

プリミティブの拡張は、任意のReactコンポーネントを拡張する場合と同じ方法で行います。

import * as React from 'react';
import * as AccordionPrimitive from '@radix-ui/react-accordion';

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は、アクセシビリティに関する懸念事項やその他の複雑な機能をカプセル化しながら、スタイリングに対する完全な制御を維持できるように設計されています。

便宜上、ステートフルコンポーネントには、data-state属性が含まれています。

前へリリース

次へアニメーション

GitHubでこのページを編集する。