主题

使用您的主题自定义 Material UI。您可以更改颜色、排版等等。

主题指定组件的颜色、表面的暗度、阴影的程度、墨水元素的适当不透明度等等。

主题让您可以为您的应用应用一致的基调。它允许您自定义项目的所有设计方面，以满足您的业务或品牌的特定需求。

为了提高应用之间的一致性，提供了浅色和深色主题类型供选择。默认情况下，组件使用浅色主题类型。

ThemeProvider

Material UI 组件开箱即用地遵循库的默认主题。使用 ThemeProvider 将自定义主题注入到您的应用程序中。

ThemeProvider 依赖于 React 的 context 特性将主题传递给组件，因此您需要确保 ThemeProvider 是您尝试自定义的组件的父组件。您可以在 API 部分了解更多信息。

主题配置变量

更改主题配置变量是将 Material UI 与您的需求相匹配的最有效方法。以下部分涵盖最重要的主题变量

您可以查看默认主题部分以完整查看默认主题。

自定义变量

当将 Material UI 的主题与 MUI System 或任何其他样式解决方案一起使用时，向主题添加额外的变量会很方便，这样您就可以在任何地方使用它们。例如

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 树。最好在组件树的根部使用它。

Props

名称	类型	描述
`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>;
}