Advanced 进阶

本节包含了 @material-ui/core/styles 的一些更多的进阶用法。

⚠️ @mui/styles is the legacy styling solution for MUI. It depends on JSS as a styling solution, which is not used in the @mui/material anymore, deprecated in v5. If you don't want to have both emotion & JSS in your bundle, please refer to the @mui/system documentation which is the recommended alternative.

⚠️ @mui/styles is not compatible with React.StrictMode or React 18.

Theming 主题

若您想将主题传递到 React 组件树，请将添加 ThemeProvider 包装到应用程序的顶层。然后，您可以在样式函数中访问主题对象。

此示例为自定义组件创建了一个主题对象（theme object）。 If you intend to use some of the Material UI's components you need to provide a richer theme structure using the createTheme() method. 请前往 theming 部分学习如何构建自己的 Material UI 主题。 Head to the theming section to learn how to build your custom MUI theme.

import { ThemeProvider } from '@material-ui/core/styles';
import DeepChild from './my_components/DeepChild';

const theme = {
  background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
};

function Theming() {
  return (
    <ThemeProvider theme={theme}>
      <DeepChild />
    </ThemeProvider>
  );
}

<ThemeProvider theme={themeInstance}>
  <DeepChild />
</ThemeProvider>

访问一个组件中的主题

您可能需要访问 React 组件中的主题变量。

`useTheme` hook

在函数组件（function components）中的使用：

import { useTheme } from '@material-ui/core/styles';

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

spacing 8px

<ThemeProvider<MyTheme>
  theme={{
    spacing: '8px',
  }}
>
  <DeepChild />
</ThemeProvider>

`withTheme` HOC

在类（class）或函数（function）组件中的使用：

import { withTheme } from '@material-ui/core/styles';

function DeepChildRaw(props) {
  return <span>{`spacing ${props.theme.spacing}`}</span>;
}

const DeepChild = withTheme(DeepChildRaw);

spacing 8px

覆盖主题

您可以嵌套多个主题提供者。当您在处理应用程序的不同区域时，若需要应用的不同外观，这个功能会让您得心应手。

<ThemeProvider theme={outerTheme}>
  <Child1 />
  <ThemeProvider theme={innerTheme}>
    <Child2 />
  </ThemeProvider>
</ThemeProvider>

内部主题将覆盖外部主题。你可以提供一个函数来扩展外层主题：

<ThemeProvider theme={…} <ThemeProvider theme={…} <ThemeProvider theme={…} >
  <Child1 />
  <ThemeProvider theme={outerTheme => ({ darkMode: true, ...outerTheme })}>
    <Child2 />
  </ThemeProvider>
</ThemeProvider>

覆盖样式 — `classes` 属性

通过 makeStyles (hook generator) 和 withStyles (HOC) 这两个 API，用户可以为每个样式表创建多种样式规则。每个样式规则都有自己的类名。组件的 classes 变量会提供类名（class names）。这在设置组件中嵌套元素的样式时特别有用。

// 样式表
const useStyles = makeStyles({
  root: {}, // 样式规则
  label: {}, // 嵌套的样式规则
});

function Nested(props) {
  const classes = useStyles();
  return (
    <button className={classes.root}>
      {/* 'jss1' */}
      <span className={classes.label}>{/* 'jss2' 嵌套规则 */}</span>
    </button>
  );
}

function Parent() {
  return <Nested />;
}

但是，类名通常是不确定的。父级组件如何覆盖嵌套元素的样式呢？

`withStyles`

这是最简单的一种情况。封装的组件接受 classes 属性，它简单地合并了样式表提供的类名。

const Nested = withStyles({
  root: {}, // a style rule
  label: {}, // a nested style rule
})(({ classes }) => (
  <button className={classes.root}>
    <span className={classes.label}>{/* 'jss2 my-label' Nested*/}</span>
  </button>
));

function Parent() {
  return <Nested classes={{ label: 'my-label' }} />;
}

`makeStyles`

想使用 hook API 的话需要一些额外的工作。你必须把父级属性作为第一个参数传递给 hook。

const useStyles = makeStyles({
  root: {}, // 样式规则
  label: {}, // 嵌套的样式规则
});

function Nested(props) {
  const classes = useStyles(props);
  return (
    <button className={classes.root}>
      <span className={classes.label}>{/* 'jss2 my-label' 嵌套规则 */}</span>
    </button>
  );
}

function Parent() {
  return <Nested classes={{ label: 'my-label' }} />;
}

JSS 插件

JSS 使用插件来扩展其核心，您可以挑选所需的功能，并且只需承担您正在使用的内容性能的开销。

Not all the plugins are available in MUI by default. 以下（一个 jss-preset-default 的子集）被包含在内： The following (which is a subset of jss-preset-default) are included: The following (which is a subset of jss-preset-default) are included:

当然，你也可以随意使用额外的插件。我们有一个使用 jss-rtl 插件的例子。

import { create } from 'jss';
import { StylesProvider, jssPreset } from '@material-ui/styles';
import rtl from 'jss-rtl';

const jss = create({
  plugins: [...jssPreset().plugins, rtl()],
});

export default function App() {
  return <StylesProvider jss={jss}>...</StylesProvider>;
}

字符串模板

如果相比 JSS 您更喜欢 CSS 的语法，则可以使用 jss-plugin-template 插件。

const useStyles = makeStyles({
  root: `
    background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
    border-radius: 3px;
    font-size: 16px;
    border: 0;
    color: white;
    height: 48px;
    padding: 0 30px;
    box-shadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);
  `,
});

请注意，此插件不支持选择器或嵌套规则。

CSS 注入顺序

了解浏览器如何计算 CSS 优先级是非常重要的，因为它是您在覆盖样式时需要了解的重点之一。我们推荐您阅读 MDN 上的这段内容：如何计算优先级？

默认情况下，注入的 style 标签会被插入到页面<head>元素的最后。它们的优先级高于您页面上的任何其他样式标签，如 CSS 模块、styled components。

injectFirst

StylesProvider 组件有一个 injectFirst 属性，用于将样式标签首先从页头（优先级较低）注入：

import { StylesProvider } from '@material-ui/styles';

 <StylesProvider injectFirst>
>   {/* 你的组件树。
      Styled components can override MUI's styles. */}
</StylesProvider>;

使用 `createStyles` 来杜绝类型扩展

使用 makeStyles / withStyles / styled 的注入顺序于调用顺序相同。例如，在这种情况下，字体最终是红色：

import clsx from 'clsx';
import { makeStyles } from '@mui/styles';

const useStylesBase = makeStyles({
  root: {
    color: 'blue', // 🔵
  },
});

const useStyles = makeStyles({
  root: {
    color: 'red', // 🔴
  },
});

export default function MyComponent() {
  // Order doesn't matter
  const classes = useStyles();
  const classesBase = useStylesBase();

  // Order doesn't matter
  const className = clsx(classes.root, classesBase.root);

  // color: 红色 🔴 胜出。
  return <div className={className} />;
}

当满足以下条件时，类名是 确定的：

insertionPoint

JSS 提供了一种机制来控制这种情况。 By adding an insertionPoint within the HTML you can control the order that the CSS rules are applied to your components.

HTML 注释

最简单的方法是在 <head> 中添加一个 HTML 注释，来决定 JSS 注入样式的位置：

  />
</head>

insertionPoint: 'jss-insertion-point',
});

export default function App() {
  return <StylesProvider jss={jss}>...</StylesProvider>;
}
  import { create } from 'jss';
import { StylesProvider, jssPreset } from '@material-ui/styles';

const jss = create({
  ...jssPreset(),
  // 当将样式注入到 DOM 中时，定义了一个自定义插入点以供 JSS 查询。</p>

<h4 spaces-before="0">HTML 注释</h4>

<p spaces-before="0">在 TypeScript 中使用 <code>withStyles</code> 可能有点棘手，但有一些实用程序可以帮助提高使用感受。</p>

<pre><code class="html"><head>
  <!-- jss-insertion-point -->
  <link href="..." />
</head> />
</head>

可能有点棘手，但有一些实用程序可以帮助提高使用感受。

<head>
  <!-- jss-insertion-point -->
  <link href="..." />
</head> />
</head>

insertionPoint: 'jss-insertion-point',
});

export default function App() {
  return <StylesProvider jss={jss}>...</StylesProvider>;
}
  import { create } from 'jss';
import { StylesProvider, jssPreset } from '@mui/styles';

const jss = create({
  ...jssPreset(),
  // 当将样式注入到 DOM 中时，定义了一个自定义插入点以供 JSS 查询。
  insertionPoint: 'jss-insertion-point',
});

export default function App() {
  return <StylesProvider jss={jss}>...</StylesProvider>;
}

其他 HTML 元素

在构建生产环境时，Create React App 会移除 HTML 注释。为了解决这个问题，您可以提供一个 DOM 元素（而不是一条注释）作为 JSS 插入点，譬如一个

Advanced 进阶

Theming 主题

访问一个组件中的主题

useTheme hook

withTheme HOC

覆盖主题

覆盖样式 — classes 属性

withStyles

makeStyles

JSS 插件

字符串模板

CSS 注入顺序

injectFirst

使用 createStyles 来杜绝类型扩展

insertionPoint

insertionPoint

HTML 注释

其他 HTML 元素

`useTheme` hook

`withTheme` HOC

覆盖样式 — `classes` 属性

`withStyles`

`makeStyles`

使用 `createStyles` 来杜绝类型扩展