主題設定

使用您的主題客製化 Material UI。您可以變更色彩、排版以及更多。

主題指定元件的色彩、表面的暗度、陰影的層級、墨水元素的適當不透明度等等。

主題讓您能為您的應用程式套用一致的風格。它允許您客製化專案的所有設計面向，以符合您的企業或品牌的特定需求。

為了提升應用程式之間更高的一致性，提供了淺色和深色主題類型供您選擇。預設情況下，元件使用淺色主題類型。

主題提供器

Material UI 元件在預設情況下會遵循程式庫的預設主題。使用 ThemeProvider 將自訂主題注入到您的應用程式中。

ThemeProvider 依賴 React 的 context 功能將主題向下傳遞給元件，因此您需要確保 ThemeProvider 是您嘗試客製化的元件的父層。您可以在 API 章節中了解更多相關資訊。

主題設定變數

變更主題設定變數是使 Material UI 符合您需求最有效的方式。以下章節涵蓋最重要的主題變數

您可以查看預設主題章節以完整檢視預設主題。

自訂變數

當搭配 MUI System 或任何其他樣式解決方案使用 Material UI 的主題時，將額外變數新增至主題會很方便，如此一來您就可以在任何地方使用它們。例如

const theme = createTheme({
  status: {
    danger: orange[500],
  },
});

TypeScript

您必須使用模組擴充將新變數新增至 Theme 和 ThemeOptions。

declare module '@mui/material/styles' {
  interface Theme {
    status: {
      danger: string;
    };
  }
  // allow configuration using `createTheme()`
  interface ThemeOptions {
    status?: {
      danger?: string;
    };
  }
}

<ThemeProvider theme={theme}>
  <CustomCheckbox defaultChecked />
</ThemeProvider>

<ThemeProvider theme={theme}>
  <CustomCheckbox defaultChecked />
</ThemeProvider>

按下 Enter 以開始編輯

若要將額外變數新增至 theme.palette，請參閱色盤客製化。

主題產生器

社群已建立很棒的工具來建立主題

mui-theme-creator：一個協助設計和客製化 Material UI 元件程式庫主題的工具。包含基本網站範本，以展示各種元件以及它們如何受主題影響
Material 色盤產生器：Material 色盤產生器可用於為您輸入的任何顏色產生色盤。

在元件中存取主題

您可以使用 useTheme Hook 在您的函式型 React 元件內存取主題變數

import { useTheme } from '@mui/material/styles';

function DeepChild() {
  const theme = useTheme();
  return <span>{`spacing ${theme.spacing}`}</span>;
}

巢狀主題

您可以巢狀多個主題提供器。

<ThemeProvider theme={outerTheme}>
  <Checkbox defaultChecked />
  <ThemeProvider theme={innerTheme}>
    <Checkbox defaultChecked />
  </ThemeProvider>
</ThemeProvider>

<ThemeProvider theme={outerTheme}>
  <Checkbox defaultChecked />
  <ThemeProvider theme={innerTheme}>
    <Checkbox defaultChecked />
  </ThemeProvider>
</ThemeProvider>

按下 Enter 以開始編輯

內部主題將會覆寫外部主題。您可以透過提供函式來擴充外部主題

CSS 主題變數

若要從主題產生 CSS 變數，請在主題設定中將 cssVariables 設定為 true，並將其傳遞給 ThemeProvider

const theme = createTheme({
  cssVariables: true,
});

function App() {
  return <ThemeProvider theme={theme}>...</ThemeProvider>;
}

這會使用 CSS 主題變數產生全域樣式表

:root {
  --mui-palette-primary-main: #1976d2;
  /* ...other variables */
}

ThemeProvider 下的所有元件都將使用這些 CSS 主題變數，而不是原始值。

按鈕樣式

- color: #1976d2;
+ color: var(--mui-palette-primary-main);

若要深入了解此功能，請參閱CSS 主題變數指南。

API

`createTheme(options, ...args) => theme`

根據收到的選項產生主題。然後，將其作為 prop 傳遞給 ThemeProvider。

參數

options (object)：接受不完整的主題物件並新增遺失的部分。
...args (object[])：將引數與即將傳回的主題深度合併。

import { deepmerge } from '@mui/utils';
import { createTheme } from '@mui/material/styles';

const theme = createTheme(deepmerge(options1, options2));

傳回值

theme (object)：一個完整、可隨時使用的主題物件。

範例

import { createTheme } from '@mui/material/styles';
import { green, purple } from '@mui/material/colors';

const theme = createTheme({
  palette: {
    primary: {
      main: purple[500],
    },
    secondary: {
      main: green[500],
    },
  },
});

主題組合：使用主題選項來定義其他選項

當主題選項的值取決於另一個主題選項時，您應該分步驟組合主題。

import { createTheme } from '@mui/material/styles';

let theme = createTheme({
  palette: {
    primary: {
      main: '#0052cc',
    },
    secondary: {
      main: '#edf2ff',
    },
  },
});

theme = createTheme(theme, {
  palette: {
    info: {
      main: theme.palette.secondary.main,
    },
  },
});

將建立主題視為一個兩步驟的組合過程：首先，您定義基本設計選項；然後，您將使用這些設計選項來組合其他選項。

警告：theme.vars 是一個用於 CSS 變數支援的私有欄位。請為自訂物件使用另一個名稱。

`responsiveFontSizes(theme, options) => theme`

根據收到的選項產生響應式排版設定。

參數

theme (object)：要增強的主題物件。
options (object [選填])

breakpoints (array<string> [選填])：預設為 ['sm', 'md', 'lg']。斷點（識別碼）陣列。
disableAlign (bool [選填])：預設為 false。字體大小是否稍微變更，以便保留行高並與 Material Design 的 4px 行高格線對齊。這需要在主題樣式中使用無單位行高。
factor (number [選填])：預設為 2。此值決定字體大小調整的強度。值越高，小螢幕上字體大小之間的差異就越小。值越低，小螢幕的字體大小就越大。該值必須大於 1。
variants (array<string> [選填])：預設為全部。要處理的排版變體。

傳回值

theme (object)：具有響應式排版的新主題。

範例

import { createTheme, responsiveFontSizes } from '@mui/material/styles';

let theme = createTheme();
theme = responsiveFontSizes(theme);

`unstable_createMuiStrictModeTheme(options, ...args) => theme`

警告：請勿在生產環境中使用此方法。

產生一個主題，以減少 React.StrictMode 內部的警告數量，例如 Warning: findDOMNode is deprecated in StrictMode。

需求

目前 unstable_createMuiStrictModeTheme 沒有新增額外需求。

參數

options (object)：接受不完整的主題物件並新增遺失的部分。
...args (object[])：將引數與即將傳回的主題深度合併。

傳回值

theme (object)：一個完整、可隨時使用的主題物件。

範例

import { unstable_createMuiStrictModeTheme } from '@mui/material/styles';

const theme = unstable_createMuiStrictModeTheme();

function App() {
  return (
    <React.StrictMode>
      <ThemeProvider theme={theme}>
        <LandingPage />
      </ThemeProvider>
    </React.StrictMode>
  );
}

`ThemeProvider`

此元件接受 theme prop 並將其套用至它所包裝的整個 React 樹狀結構。最好在您的元件樹狀結構的根目錄中使用它。

屬性

名稱	類型	描述
children *	node	您的元件樹狀結構。
theme *	union: object \| func	一個主題物件，通常是 `createTheme()` 的結果。提供的佈景主題將與預設佈景主題合併。您可以提供函式來擴充外部佈景主題。

範例

import * as React from 'react';
import { red } from '@mui/material/colors';
import { ThemeProvider, createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: red[500],
    },
  },
});

function App() {
  return <ThemeProvider theme={theme}>...</ThemeProvider>;
}