无样式 UI 组件库：简约设计，灵活开发

前言

在平常的项目开发中，当我们使用其他 UI 组件库时，常常会遇到一个问题。这些组件库自带的样式往往无法满足产品设计的要求。在这种情况下，我们通常会使用!important 来覆盖样式。然而，即便如此，有时还是无法实现预期的交互效果，这时就需要重写样式了。但这样的操作会使代码变得越来越冗长、复杂，而且后期的维护难度也大大增加。

正是为了解决这一系列的问题，Headless UI 应运而生。

项目介绍

Headless UI 是一个开源的无样式 UI 组件库。这里的 “无样式” 是指它不预设任何 CSS 样式，开发者能够使用 Tailwind CSS 等其他样式框架构建出符合预期的界面。

Headless UI 着重关注组件的可访问性、逻辑性与灵活性，它赋予开发者为任何前端框架打造可定制且对无障碍访问友好的 UI 组件的能力。最直观的体现是，在 PC 端和移动端，我们可以运用同一套逻辑的组件，搭配两套不同的样式，以此满足用户多样化的需求。

组件安装

npm install @headlessui/react

使用

import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
function Example() {
  return (
    <Menu>
      <MenuButton>My account</MenuButton>
      <MenuItems anchor="bottom">
        <MenuItem>
          <a className="block data-[focus]:bg-blue-100" href="/settings">
            Settings
          </a>
        </MenuItem>
        <MenuItem>
          <a className="block data-[focus]:bg-blue-100" href="/support">
            Support
          </a>
        </MenuItem>
        <MenuItem>
          <a className="block data-[focus]:bg-blue-100" href="/license">
            License
          </a>
        </MenuItem>
      </MenuItems>
    </Menu>
  )
}

修改样式

只需对引入样式 UI 的 className 进行修改即可，当然，也可以选择自定义样式。

功能和特性

无样式组件：

Headless UI 所提供的 UI 组件是无样式的，即不带有任何预设的样式与主题。这一点有别于 Bootstrap、Material - UI 之类的其他前端框架，那些框架往往会提供带有预设样式的组件，从而能够快速打造出视觉上风格统一的界面。

可访问性优先：

Headless UI 将可访问性放在突出位置，着重确保其组件满足无障碍标准。如此一来，开发者所构建的应用不仅在视觉上富有吸引力，更能对所有用户都展现出友好性。
灵活性：

因为组件不存在预设样式，开发者对组件的外观和行为拥有完全的掌控权，这为开发工作带来了极大的灵活性。开发者能够依据自身的设计系统来定制组件样式，无需受到框架预设样式的束缚。

框架不可知论：

Headless UI 并不依赖于某一特定的前端框架，虽然它与 React 等现代框架能够很好地协同工作，但在其他框架环境中，甚至是无框架环境下，它同样可以发挥作用。

专注于 UI 逻辑：

Headless UI 更侧重于组件的逻辑和行为，而非样式。这使得开发者能够重复利用组件逻辑，同时可以根据不同项目的需求对样式进行调整。

项目地址