# Material UI 如何引入自定义主题

- Link: https://www.ixiqin.com/2021/10/30/material-ui-how-to-introduce-a-custom-theme/
- Published: 2021-10-30T09:47:14+08:00
- Author: 白宦成

文章目录

 [Toggle](https://www.ixiqin.com/2021/10/30/material-ui-how-to-introduce-a-custom-theme/#)

 * [1. 设计自定义主题](https://www.ixiqin.com/2021/10/30/material-ui-how-to-introduce-a-custom-theme/#1_%e8%ae%be%e8%ae%a1%e8%87%aa%e5%ae%9a%e4%b9%89%e4%b8%bb%e9%a2%98)
 * [2. 修改代码，引入主题](https://www.ixiqin.com/2021/10/30/material-ui-how-to-introduce-a-custom-theme/#2_%e4%bf%ae%e6%94%b9%e4%bb%a3%e7%a0%81%ef%bc%8c%e5%bc%95%e5%85%a5%e4%b8%bb%e9%a2%98)

在 Next.js 中，如果你希望为 Material UI 引入自定义主题，可以如下实现

## 1. 设计自定义主题

参考 [Theming 主题 – MUI](https://mui.com/zh/customization/theming/) 来定制自己的
主题，所有的属性可以在 [默认主题 – MUI](https://mui.com/zh/customization/default-theme/)
找到。修改你需要修改的对应项目即可。剩下的可以使用默认。

## 2. 修改代码，引入主题

修改你的 `pages/_app.js`，在其中添加如下代码，来应用你的主题。

    ```javascript
    import { ThemeProvider, createTheme } from '@material-ui/core/styles';
    const themeOptions = createTheme({
      palette: {
        type: 'dark',
        primary: {
          main: '#ff9900',
        }
      },
    });
    function MyApp({ Component, pageProps }) {
      return (
          <ThemeProvider theme={themeOptions}> <Component {...pageProps} /></ThemeProvider>
      )
    }
    Code language: JavaScript (javascript)
    ```