material-ui_Material-UI：如何实现暗模式和编辑主题颜色

material-ui

Material-UI is a React component library made to follow Google’s Material Design guidelines. As such, it offers a clean UI experience that is both accessible and cross-browser compatible. By default, it comes in light mode, so this article will cover how to switch to dark mode. As a bonus, we’ll also explore how to edit the theme colors.

Material-UI是一个React组件库，遵循Google的Material Design指南制作。 因此，它提供了可访问且跨浏览器兼容的干净UI体验。 默认情况下，它处于亮模式，因此本文将介绍如何切换到暗模式。 另外，我们还将探索如何编辑主题颜色。

基础知识：用纱或npm安装 (Basics: Installation with yarn or npm)

The Material-UI website itself explains installation pretty well, but to recap, run the following code in your terminal, in your project’s directory.

Material-UI网站本身对安装进行了很好的解释，但要概括一下，请在终端的项目目录中运行以下代码。

yarn add @material-ui/core
// or
npm install @material-ui/core

Next, add the Roboto font by including this in the head of your HTML file.

接下来，通过在HTML文件的开头添加Roboto字体来添加它。

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

That’s the bare minimum needed! However, if you end up using Material-UI’s icons, you will need to install additional packages. Refer to their installation page for further instructions if you wish to use icons.

这是最低要求！ 但是， 如果最终使用Material-UI的图标，则需要安装其他软件包。 如果要使用图标， 请参考其安装页面以获取更多说明。

更改为暗模式 (Changing to Dark Mode)

Material-UI’s website in dark mode, which also serves as an example of what it will look like when implemented into your own app.

Material-UI的网站在黑暗模式下，还可以作为在您自己的应用程序中实现后的外观的示例。

Dark mode is easier on the eyes, and luckily Material-UI allows a quick way to customize the theme. It’s a four-step process, which should result in the following index.js file.

暗模式在眼睛上更容易，幸运的是，Material-UI允许快速自定义主题。 这是一个四步过程，应产生以下index.js文件。

Note lines 6–7 (imports), 9–13 (defining our custom theme) and 16–19 (applying it to our app).

注意第6-7行(导入)，9-13行(定义我们的自定义主题)和16-19行(将其应用于我们的应用程序)。

Let’s see how we get to this step-by-step.

让我们看看如何逐步进行。

步骤1：导入createMuiTheme和ThemeProvider (Step 1: Import createMuiTheme and ThemeProvider)

In y