Reka UI 徽标Reka
backdrop
示例
指南

样式

Reka UI 是无样式的，并且与任何样式解决方案兼容，让您可以完全控制样式。

样式概述

功能性样式

您可以控制样式的所有方面，包括功能性样式。例如，默认情况下，对话框叠加层不会覆盖整个视口。您需要负责添加这些样式以及任何展示样式。

类

所有组件都接受 class 属性，就像普通组件一样。此 class 将传递给 DOM 元素。您可以按预期在 CSS 中使用它。

传送的元素

某些元素（例如模态框或弹出框）会被传送到 body 中。在使用作用域样式应用 CSS 时，您需要使用深度选择器来定位它们。

数据属性

当组件有状态时，其状态将通过 data-state 属性暴露。例如，当一个手风琴项打开时，它会包含 data-state="open" 属性。

使用 CSS 进行样式设计

为部件添加样式

您可以通过定位您提供的 class 来为组件的部件添加样式。

vue
<script setup lang="ts">
import { AccordionRoot, AccordionItem, ... } from "reka-ui";
</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 "reka-ui";
</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 "reka-ui";
</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 "reka-ui";
</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 "reka-ui";

interface Props extends AccordionItemProps {
  foo: string;
}

defineProps<Props>();
</script>

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

总结

Reka UI 旨在封装可访问性问题和其他复杂功能，同时确保您完全控制样式。

为方便起见，有状态组件包含一个 data-state 属性。