快速入門

開始使用 MUI Base，這是一個無頭（「無樣式」）React UI 元件和底層 hook 的函式庫。

安裝

@mui/base 是完全獨立的 – 執行以下其中一個命令將 MUI Base 新增到您的 React 專案

npm install @mui/base

Peer dependencies

請注意，react 和 react-dom 是 peer dependencies，這表示您應確保在安裝 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 設計系統作為參考。

元件和 hook

MUI Base 提供了一個 <Button /> 元件和一個 useButton hook。兩者都可用於建立按鈕，並且各有優點和缺點—詳情請參閱元件 vs. hook。

以下程式碼片段示範了每個的基本實作

按鈕元件

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

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

useButton hook

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 並將其用作樣式 hook

/* styles.css */

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

/* App.js */

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

像 Button 這樣的 MUI Base 元件帶有一個 classes 物件（例如 buttonClasses），它為設定特定狀態的樣式提供了 class hook。

/* To style the disabled state: */

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

以下示範展示如何使用純 CSS 以及 MUI Base 的 Button 元件和 useButton hook 建立 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 utility，提供類似 styled-components 的 API，用於建立符合主題的設計。

MUI System 的核心 utility 是一個 styled function，它等效於 emotion 和 styled-components 中的 styled() function。插值或作為 styled 呼叫的 function 的參數會從上層 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 的按鈕元件

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 hook

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，它提供了一種使用 theme-aware 值將 ad-hoc 樣式應用於使用 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 使用方式文件以了解更多詳細資訊。