MUI v5 主題 (Theme)：基礎概念與使用方法

信息

本篇文章的內容來自 MUI 的官方網站的 Theme 主題相關文件，可以將本篇文章作為官方文件的快速導讀，可以快速了解想要實作的功能以及大致使用方法，若需要進一步深入了解使用方法可以透過個段落提供的連結找到對應的官方文件。

簡介

MUI（Material-UI）是目前最流行的 React UI 框架之一，主題（Theme）功能使我們能夠自定義和並且定調應用整個應用程式的外觀和風格，我們可以定義視覺元素如顏色、字體、間距等，以確保整個應用程式保持一致的風格。

本筆記將介紹 MUI v5 中的主題功能，並提供簡單的範例說明要如何最初步地定義與使用 theme 功能

Example

先來看一個簡單的範例，讓我們對主題的應用有一個直觀的了解。假設我們想要創建一個主色違白色的主題，並將主色套用在 component 上。

import React from 'react';
import { createTheme, ThemeProvider, Button } from '@mui/material';

const theme = createTheme({
  palette: {
    primary: {
      main: '#2196f3',
    },
  },
});

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="contained" color="primary">
        Click me!
      </Button>
    </ThemeProvider>
  );
};

export default App;

在上面的例子中，我們首先使用 createTheme 函數創建了一個自定義主題，接著，我們使用 ThemeProvider 元件將應用程式包裹起來，以應用剛剛創建的主題。最後，我們使用 MUI 提供的 Button 元件來創建一個按鈕，並指定它的變體（variant）為 "contained"（填滿樣式），顏色（color）為 "primary"（主要顏色）。這樣，按鈕將根據我們定義的主題顯示為白色。

API

createTheme

在 MUI 中，我們可以使用 createTheme 函數來創建自定義 theme，再將 theme 傳給 ThemeProvider 作為 prop。createTheme 接受一個object 作為參數，它包含了我們想要自定義的主題配置，像是調色板（palette）、字體（typography）、間距（spacing）等。

以下是一個簡單的示例，展示如何使用 createTheme 函數創建一個自定義主題，我們定義了主要（primary）和次要（secondary）顏色，並指定了它們的主要色彩值。同時，我們還設置了字體為 Arial 和 sans-serif，字體大小為 14 像素，間距為 8 像素:

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

const theme = createTheme({
  palette: {
    primary: {
      main: '#2196f3',
    },
    secondary: {
      main: '#f50057',
    },
  },
  typography: {
    fontFamily: 'Arial, sans-serif',
    fontSize: 14,
  },
  spacing: 8,
});

如果想實際合併兩個主題的設置選項並基於它們創建一個新 theme，我們會需要使用 deepmerge 將它們合併作為第一個參數提供給 createTheme 函數。

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

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

ThemeProvider

ThemeProvider 的作用是用來包裹整個應用程式或是叫上層的 component ，讓 ThemeProvider 內的 component 可以使用我們定義的主題。

import React from 'react';
import { ThemeProvider } from '@mui/material';
import App from './App';
import theme from './theme';

const Root = () => {
  return (
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  );
};

export default Root;

我們也可以嵌套多個 ThemeProvider，內層的 theme 會 override 外層的 theme

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

`useTheme hook`

我們可以透過 useTheme hook 在 component 中取得主題變數

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

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

主題配置

預設主題配置變數

MUI 的主題配置允許我們自定義各種變數以控制應用程式的風格，以下是一些常用的預設主題配置變數：

客製化主題配置變數

除了以上幾種常見的配置變數外，我們也可以定義自己的主題配置變數：

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

提示

💡 如果使用 TypeScript 的話需使用 module augmentation 將新定義的變數加入Theme 與ThemeOptions.

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

實用的 MUI Theme 線上編輯器

以下為官方推薦的兩個實用主題建制工具，真的滿方便好用的

簡介​

Example​

API​

createTheme​

ThemeProvider​

useTheme hook​

主題配置​

預設主題配置變數​

客製化主題配置變數​

實用的 MUI Theme 線上編輯器​

Reference​

簡介