隆重推出 MUI Base：Material UI 的无头替代方案

虽然 Material UI 非常适合构建符合 Material Design 的时尚用户界面，但当您的设计系统与默认值显着偏离时，它可能会变得笨重。 我们理解。 我们都经历过。

这就是我们构建一个全新的无头 React UI 组件和 Hook 库（名为 MUI Base）的原因——让您可以完全控制用户界面的外观和感觉，而无需覆盖任何默认设置。

如果您已经熟悉 Material UI，则 MUI Base 很容易上手，因为 API 非常相似——事实上，它们的设计是互补的。 从头开始使用 MUI Base，或者使用 Material UI 进行快速原型设计，然后在您需要更多自定义选项时切换到 MUI Base。

为什么选择 MUI Base？

创建 MUI Base 是为了满足与 Material UI 解决的需求不同的需求。 Material UI 在为您提供快速创建外观接近 Material Design 规范的用户界面的方法方面表现出色。 另一方面，MUI Base 优先考虑可定制性而不是开发速度。 这使其更适合像素级完美实现至关重要的面向公众的项目。

那么，为什么不使用市场上已有的任何无头库呢？ 还有其他替代方案，例如 Headless UI、Radix Primitives 和 React Aria 等。 MUI Base 的显着优势在于，它吸取了 Material UI（一个完整且成熟的库）的最佳部分。 它没有 Material UI 中报告和修复的许多问题。 此外，社区多年来提出的许多 Material UI 改进都包含在 MUI Base 中。

虽然这两个库是为不同的用例而创建的，但它们共享许多共同的特性和设计模式，并且旨在在 MUI 生态系统中彼此互补。 如果您之前使用过 Material UI，您会对 MUI Base 的 API 感到熟悉，这使得在需要时可以轻松地将项目（或仅项目的一部分）从一个库迁移到另一个库。 我们的目标是创建所有 Material UI 组件的无样式版本（这样做有意义）。

组件和 Hook

MUI Base 提供两种构建块：无样式组件和 Hook。

组件是两者中更易于使用的。 将组件放置在页面上，添加您自己的样式，即可使用！ 重要的是要注意，您不仅限于 Material UI 中提供的样式选项。 当然，您仍然可以使用MUI System，但如果您更喜欢 Emotion、Tailwind CSS、纯 CSS 或任何其他样式引擎，它们也可用！ 查看使用 Tailwind CSS 指南，了解使用此库的示例。

与 Material UI 相比，MUI Base 的组件没有任何默认样式。 它们提供功能和结构，而设计师和开发人员负责视觉效果。

每个无样式组件都允许您修改或覆盖其插槽——代表构成组件 DOM 结构的内部元素的较小子组件。 例如，SwitchUnstyled 包含根插槽、拇指插槽、输入插槽和轨道插槽。 您可以根据组件的状态控制传递给每个插槽的 props（包括 className），甚至可以用您自己的插槽组件替换默认插槽组件。

观看实时演示，了解其工作原理

Hook 通过完全从结构中提取逻辑来更进一步，因此您可以使用所需的任何 DOM 元素从头开始构建。 这需要更多的工作来实现，但为您提供了最大的自定义自由度。

调用后，Hook 返回一个描述组件状态的对象（即开关是否打开），以及应用辅助功能 props 和事件处理程序的方法。 您应该将这些 props 散布在您定义的组件上，如下所示

function MySwitch(props: UseSwitchParameters) {
  const { getInputProps, checked, disabled } = useSwitch(props);

  return (
    <span className={clsx('root', { checked, disabled })}>
      <span className="thumb" />
      <input className="input" {...getInputProps()} />
    </span>
  );
}

包含的内容

该库的初始版本包含 17 个组件。 有关详细信息，请查看 MUI Base 文档。

您可以跟踪我们添加新组件的进度——并发表评论以影响我们的优先级——在这个专门的 GitHub issue中。

@mui/base 包作为 alpha 版本发布。 这意味着组件 API 可能会发生变化——特别是当我们收到社区关于改进空间的反馈时。 但是，我们相信该库目前已经足够可靠，可以开始使用它构建设计系统。 事实上，我们正在使用 MUI Base 来创建 Joy UI——我们将要推出的下一个 Core 组件库产品，其中也包括 Material UI。 未来，MUI Base 也将用作 Material UI 组件的基础，以便在我们全套产品中提供一致的开发者体验。

需要反馈

立即尝试 MUI Base，运行以下命令之一

查看文档，试用组件，并务必告诉我们您的想法！

如果您发现任何错误或想分享改进的想法，请随时在 GitHub 上的 MUI Core 存储库中打开一个 issue。 请务必在 issue 标题中包含“[base-ui]”，以帮助我们保持井井有条。

创作愉快！