スタイリング

Radixプリミティブはスタイルを持たず、あらゆるスタイリングソリューションと互換性があり、スタイリングを完全にコントロールできます。

スタイリングの概要

機能的なスタイル

機能的なスタイルを含む、スタイリングのすべての側面をコントロールできます。たとえば、デフォルトでは、ダイアログオーバーレイはビューポート全体をカバーしません。それらのスタイルと、表示スタイルを追加するのはあなたの責任です。

クラス

すべてのコンポーネントは、通常のコンポーネントと同様に、class属性を受け入れます。このクラスは、DOM要素に渡されます。CSSで期待どおりに使用できます。

テレポートされた要素

モーダルやポップオーバーなどの一部の要素は、bodyにテレポートされます。スコープ付きスタイルを使用してCSSを適用する場合は、ディープセレクターを使用してそれらをターゲットにする必要があります。

データ属性

コンポーネントがステートフルである場合、その状態はdata-state属性で公開されます。たとえば、アコーディオンアイテムが開いている場合は、data-state="open"属性が含まれます。

CSSでのスタイリング

一部のスタイリング

指定したclassをターゲットにすることで、コンポーネントの一部をスタイルできます。

vue

<script setup lang="ts">
import { AccordionRoot, AccordionItem, ... } from "radix-vue";
</script>

<template>
  <AccordionRoot>
    <AccordionItem class="AccordionItem" value="item-1" />
    <!-- ... -->
  </AccordionRoot>
</template>

<style>
.AccordionItem {
  /* ... */
}
</style>

状態のスタイリング

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

css

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

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

スコープ付きスタイル

スコープ付きスタイルを使用してコンポーネントをスタイルできます。テレポートされた要素は、ディープセレクターを使用してターゲットにする必要があるため、注意してください。

vue

<script setup lang="ts">
import { DropdownMenuRoot, DropdownMenuItem, ... } from "radix-vue";
</script>

<template>
  <DropdownMenuRoot>
    <!-- ... -->
    <DropdownMenuPortal>
      <DropdownMenuContent class="DropdownMenuContent">
        <DropdownMenuItem class="DropdownMenuItem">An item</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenuPortal>
  </DropdownMenuRoot>
</template>

<style scoped>
:deep(.DropdownMenuContent) {
  /* ... */
}

.DropdownMenuItem {
  /* ... */
}
</style>

Tailwind CSSでのスタイリング

以下の例では、Tailwind CSSを使用していますが、任意のライブラリを使用できます。

一部のスタイリング

classをターゲットにすることで、コンポーネントの一部をスタイルできます。

vue

<script setup lang="ts">
import { AccordionRoot, AccordionItem, ... } from "radix-vue";
</script>

<template>
  <AccordionRoot>
    <AccordionItem class="border border-gray-400 rounded-2xl" value="item-1" />
    <!-- ... -->
  </AccordionRoot>
</template>

状態のスタイリング

Tailwind CSSの強力なバリアントセレクターを使用すると、data-state属性をターゲットにすることでコンポーネントの状態をスタイルできます。

vue

<script setup lang="ts">
import { AccordionRoot, AccordionItem, ... } from "radix-vue";
</script>

<template>
  <AccordionRoot>
    <AccordionItem
      class="
        border border-gray-400 rounded-2xl
        data-[state=open]:border-b-2 data-[state=open]:border-gray-800
      "
      value="item-1"
    />
    <!-- ... -->
  </AccordionRoot>
</template>

プリミティブの拡張

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

vue

<script setup lang="ts">
import { AccordionItem, type AccordionItemProps } from "radix-vue";

interface Props extends AccordionItemProps {
  foo: string;
}

defineProps<Props>();
</script>

<template>
  <AccordionItem v-bind="$props"><slot /></AccordionItem>
</template>

まとめ

Radixプリミティブは、アクセシビリティの問題やその他の複雑な機能をカプセル化するように設計されており、スタイリングを完全にコントロールできるようにしています。

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

情報

ソース: Radix UI

スタイリング ​