快速开始

开始使用 MUI Base，一个无头（“无样式”）React UI 组件和底层钩子的库。

安装

@mui/base 是完全独立的 – 运行以下命令之一将 MUI Base 添加到您的 React 项目

npm install @mui/base

对等依赖

请注意，react 和 react-dom 是对等依赖，这意味着您应该在安装 MUI Base 之前确保它们已安装。

"peerDependencies": {
  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
},

实现一个按钮

这是一个快速教程，介绍了如何使用和样式化 MUI Base 组件的基础知识，通过复制 GitHub UI 中的按钮，并以其 Primer 设计系统作为参考。

组件和钩子

MUI Base 提供了一个 <Button /> 组件和一个 useButton 钩子。两者都可以用于构建按钮，并且每个都有其自身的优点和缺点——有关详细信息，请参阅组件 vs. 钩子。

下面的代码片段演示了每个的基本实现

Button 组件

import * as React from 'react';
import { Button } from '@mui/base/Button';

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

useButton 钩子

import * as React from 'react';
import { useButton } from '@mui/base/useButton';

export default function App() {
  const { getRootProps } = useButton();
  return (
    <button type="button" {...getRootProps()}>
      Click Me
    </button>
  );
}

MUI Base 不带任何样式或样式解决方案——以下是 Button 组件开箱即用的外观

您可以使用您选择的任何样式方法来为您的应用程序创建完全可自定义的组件。有关自定义策略的更多详细信息，请参阅自定义。

这里有一些样式示例

使用 CSS 进行样式化

传递一个 className prop 并将其用作样式钩子

/* styles.css */

.btn {
  background-color: #1f883d;
  /* the rest of the styles */
}

/* App.js */

<Button className="btn">Create Repository</Button>

像 Button 这样的 MUI Base 组件带有一个 classes 对象（例如 buttonClasses），该对象为样式化特定状态提供了类钩子。

/* To style the disabled state: */

.${buttonClasses.disabled} { /* ".base-Button-disabled" */
  cursor: not-allowed;
}

下面的演示展示了如何使用纯 CSS 以及 MUI Base 的 Button 组件和 useButton 钩子来创建 Primer 按钮

使用 Tailwind CSS 进行样式化

安装 Tailwind CSS 后，将其 utility classes 传递给 className，如下所示

<Button className="bg-green-600 rounded-md py-1 px-4...">Create Repository</Button>

下面的演示展示了如何使用 Tailwind CSS 构建 Primer 按钮

使用 MUI System 进行样式化

MUI System 是一小组 CSS 实用程序，它们提供了一个类似 styled-components 的 API，用于构建符合主题的设计。

MUI System 的核心实用程序是一个 styled 函数，它等同于 emotion 和 styled-components 中的 styled() 函数。插值或作为 styled 调用的函数的参数会从上层的 ThemeProvider 接收 theme。

import * as React from 'react';
import { ThemeProvider } from '@emotion/react';
import { styled } from '@mui/system';
import { Button } from '@mui/base/Button';

const theme = {
  palette: {
    primary: 'green',
    text: '#fff',
  },
};

const GitHubButton = styled(Button)(
  ({ theme }) => `
    background-color: ${theme.palette.primary /* => 'green' */};
    ${/* ... the rest of the styles */}
  `,
);

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <GitHubButton>Create Repository</GitHubButton>
    </ThemeProvider>
  );
}

MUI Base 文档中的大多数演示都以这种方式使用 MUI System 进行样式化。您可以在浏览器控制台中检查本网站上使用的 theme 对象，或者在 Material UI 默认主题文档中探索默认结构。

下面的演示展示了如何使用 MUI System 创建 Primer 按钮

使用 MUI System 的 Button 组件

import * as React from 'react';
import { Button } from '@mui/base/Button';
import { styled } from '@mui/system';

const GitHubButton = styled(Button)(
  ({ theme }) => `
    background-color: ${theme.palette.mode === 'dark' ? '#238636' : '#1f883d'};
    ${/* ... the rest of the styles */}
  `,
);

export default function App() {
  return (
    <GitHubButton>Create Repository</GitHubButton>
  );
}

使用 MUI System 的 useButton 钩子

import * as React from 'react';
import { useButton } from '@mui/base/useButton';
import { styled } from '@mui/system';

const GitHubButton = styled('button')(
  ({ theme }) => `
    background-color: ${theme.palette.mode === 'dark' ? '#238636' : '#1f883d'};
    ${/* ... the rest of the styles */}
  `,
);

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

  return (
    <GitHubButton type="button" {...getRootProps()}>
      Create Repository
    </GitHubButton>
  );
}

使用 sx prop

MUI System 支持 sx prop，它提供了一种使用主题感知值将临时样式应用于使用 styled 创建的任何组件的快速方法。

const GitHubButton = styled(Button)(
  ({ theme }) => `
    background-color: ${theme.palette.mode === 'dark' ? '#238636' : '#1f883d'};
    margin: 0;
  `,
);

export default function App() {
  return (
    <GitHubButton sx={{ m: 2 /* => margin: 16px */ }}>
      Create Repository
    </GitHubButton>
  );
}

下面的演示展示了如何结合 MUI System 和 sx prop 构建 Primer 按钮

阅读 MUI System 用法文档以获取更多详细信息。