像您这样的读者支持 MUO。 如果您通过我们网站上的链接进行购买，我们可能会收到联属佣金。 阅读更多。

您可以使用提供预构建样式元素的组件库来简化 React 应用程序开发过程。 这些库可以节省大量时间和精力，但它们也会限制您对应用程序设计的控制。 如果您需要更多地控制 React 应用程序的设计，请考虑使用未格式化的组件库。

什么是无样式组件库？

原始组件库用于开发可访问的 React 应用程序。 它们是没有预定义样式的可重用 UI 组件的集合。 它们为您提供 UI 元素的基本结构，无需任何样式。 这使您可以完全控制组件的外观和感觉。

无样式组件库的优点

以下是使用未格式化组件库的一些好处：

  • 完全掌控造型：原始组件库使您可以完全控制组件的外观。 您可以使用任何 CSS 或样式框架来根据您的需求自定义组件。
  • 加速发展：原始组件库可以通过提供一组可在应用程序中使用的预构建组件来帮助您加快开发速度。
  • 易于维护：无样式组件库很容易管理，因为它们没有与特定样式框架紧密耦合。 这意味着您可以轻松更新样式，而无需对底层代码进行任何更改。

1. 基数用户界面

Radix UI 是一个专注于可访问性的原始组件库。 它提供了一组可供所有用户访问的 UI 组件。 Radix UI 可让您构建漂亮的 React 应用程序。

使用 Radix UI 时，您可以安装所需的单个组件，而不是整个库。 这可以确保您的应用程序保持轻量级。

例如，如果您只需要一个 Accordion 组件，则可以通过运行以下命令将其安装到您的应用程序中：

 npm install @radix-ui/react-accordion

安装手风琴组件后，您可以在 React 应用程序中创建手风琴。

这里有一个 example 使用手风琴组件：

 import React from "react"
import * as Accordion from "@radix-ui/react-accordion"

export default function App() {
  return (
    <div>
      <Accordion.Root type="single" defaultValue="item-1" collapsible>
        <Accordion.Item value="item-1">
          <Accordion.Trigger>Is this accordion unstyled?</Accordion.Trigger>
          <Accordion.Content>Yes. It is unstyled.</Accordion.Content>
        </Accordion.Item>
      </Accordion.Root>
    </div>
  )
}

上面的代码块使用以下命令设置了一个基本的、无样式的手风琴组件 @radix-ui/react-accordion 允许具有可定制内容的可折叠元素的库。

该代码生成一个如下所示的手风琴：

2. 咏叹调反应

React Aria 库是一组用于在 React 中构建用户界面的钩子。 该库通过提供遵循可访问性最佳实践的组件集合，使创建可访问的 Web 应用程序变得更加容易。

Adobe 开发并维护 React Aria 库。 该库是更广泛的 Adob​​e Spectrum 设计系统的一部分，该系统为创建可访问的用户界面提供了全面的设计指南和资源。 React Aria 库提供的元素是无样式的，因此您可以自定义元素以满足您的需求。

要在 React 应用程序中使用 React Aria，请运行以下命令来安装它：

 npm install react-aria

这里有一个 example 了解如何使用创建按钮组件 使用按钮 钩：

 import React from 'react'
import {useButton} from 'react-aria';

function Button(props: any) {
  let ref = React.useRef(null);
  let { buttonProps } = useButton(props, ref);

  return (
    <button {...buttonProps} ref={ref}>
      {props.children}
    </button>
  );
}

export default Button;

现在您可以导入并渲染它 按钮 组件到您选择的任何其他组件中。

为了 example：

 import React from 'react'
import Button from './Button';

function App() {
  return (
    <Button>Click Me</Button>
  );
}

export default App;

渲染上面的代码块将生成一个简单的按钮，如下所示：

如果您因为钩子而使用 React Aria 感到不舒服，请使用 React Aria 组件 图书馆代替。 该库提供了默认情况下可以访问的预构建组件。 它是 React Aria 库顶部的一个薄层。 提供的组件是原始的，因此这两个库非常相似。

3. 基本用户界面

Base UI 是一个原始的 React UI 库，提供无需格式化的 UI 组件。 Material UI 团队使用一组基本组件构建了基本 UI，您可以使用它们来构建自己的自定义 React 应用程序。 他们的 Base UI 库基于与 Material UI 相同的强大技术，但 Base UI 并未实现 Material Design。

您可以使用以下命令在 React 应用程序中安装 Base UI：

 npm install @mui/base

Base UI 提供移动组件，允许您直接从库导入和使用组件。 它还提供了可用于创建和配置组件的挂钩。

这里有一个 example 基本UI组件的使用：

 import React from "react";
import Button from "@mui/base/Button";

export default function App() {
  return (
    <div>
      <Button>Click Me</Button>
    </div>
  );
}

此代码使用以下命令生成一个简单的按钮 按钮 基本 UI 库的组件。 你也可以用它 使用按钮 Hook 来执行相同的任务。

 import React from "react";
import useButton from "@mui/base/useButton";

export default function App() {
  const { getRootProps } = useButton();

  return (
    <div>
      <button {...getRootProps()}>Click Me</button>
    </div>
  );
}

这 使用按钮 钩子和那个 按钮 该组件生成一个无样式的按钮，如下图所示。

4. 无头用户界面

您可以探索的另一个库是 Headless UI，它提供无样式的 UI 元素，让您可以根据需要自由自定义 UI 组件的外观和行为。

您可以使用以下命令安装该库：

 npm install @headlessui/react

安装该库后，您可以在 React 应用程序中使用该库提供的各种组件。

为了 example：

 import React from "react";
import { Popover } from "@headlessui/react";

export default function App() {
  return (
    <div>
      <Popover>
        <Popover.Button>Popover</Popover.Button>

        <Popover.Panel>
          <p>This is a Popover</p>
        </Popover.Panel>
      </Popover>
    </div>
  );
}

在此示例中，您使用以下命令创建一个弹出窗口 约夏克布丁 来自 Headless UI 库的组件。 上面的代码块生成一个如下所示的弹出窗口。

使用无样式组件获得完全控制

原始组件库使您能够完全控制 React 应用程序的设计，并使您能够创建独特的用户体验。 这些库提供了一系列选项来满足您的需求。 您可以利用上述库创建具有视觉吸引力且高度可定制的 React 应用程序。