跳到主要内容

RadixUI

  • 一个面向 React 的无样式 / 可访问性组件

  • Radix UI 是目前 React 生态中最流行的 “无样式组件库”（Headless UI） 之一。它的核心哲学是：只提供交互逻辑、可访问性（Accessibility）和 DOM 结构，而不提供任何 CSS 样式

  • 构建高度定制的设计系统

  • 配合 Tailwind CSS 使用： 这是目前前端最火的组合。Radix 负责ui逻辑，Tailwind 负责样式。

  • 需要极小包体积： 你可以按需引入组件（如只引入 @radix-ui/react-dialog），避免引入不必要的代码。

常用组件​

bash
 "@radix-ui/react-collapsible"
 "@radix-ui/react-dialog"
 "@radix-ui/react-dropdown-menu"
 "@radix-ui/react-hover-card"
 "@radix-ui/react-icons"
 "@radix-ui/react-progress"
 "@radix-ui/react-scroll-area"
 "@radix-ui/react-select"
 "@radix-ui/react-separator"
 "@radix-ui/react-slot"
 "@radix-ui/react-tooltip"
 "@radix-ui/react-use-controllable-state"
 "@radix-ui/react-visually-hidden"

相关组件使用​

theme​

  • 预设高质感样式
  • 在根部注入样式
css
/* 导入基础样式文件 */
import "@radix-ui/themes/styles.css";

使用技巧与避坑指南​

asChild属性​

  • 这是 Radix 最强大的特性之一。默认情况下，Radix 会渲染自己的 HTML 标签（比如 button）。如果你想用自己的组件（如 NextLink 或自定义按钮）作为触发器，必须加上 asChild，它会将 Radix 的行为注入到子组件中，而不会增加多余的 DOM 层级

利用 data-* 属性进行样式控制​

  • Radix 会根据组件状态自动切换 data-state 属性（如 open、closed、active）。

    • CSS: [data-state='open'] { ... }
    • Tailwind: data-[state=open]:bg-blue-500

动画处理​

  • 由于 Radix 在关闭时会立即卸载组件，处理退出动画通常需要配合 framer-motion 或使用 Radix 提供的属性。如果是简单的 CSS 动画，可以利用 data-state 的变化