Skip to main content

组件设计指南

我们将介绍定义组件总体外观和感觉的三大主题，所有这些主题都建立在 Material UI 主题功能之上：

  • 布局 * 色调 * 排版

🏗️ 布局​

布局指的是如何组织或堆叠内容。 只要有可能，我们都希望使用 Backstage 的组件(查看故事书的列表和演示)，否则就回到 Material UI 组件(查看Material UI 文档).

如果这些都不符合你的布局需求，那么你可以构建自己的组件。 不过，不建议直接使用 HTML+CSS；最好使用 Material UI 布局组件来让你的布局具有主题感知能力，也就是说，如果有人更改了主题，你的布局会对这些更改做出反应，而不需要更新代码。

具体来说，您需要查看这些使用了theme.spacing()边距、衬垫和位置以及色调和排版的功能：

调色板​

如果您正在使用一个现有组件，并希望调整它在整个应用程序中使用的颜色，您可以使用自定义主题来覆盖该组件的特定样式，包括填充、边距和颜色。

然而，当你从头开始制作一个组件时，你需要尽可能地参考主题，确保使用主题的调色板。 大多数Backstage组件和所有 Material UI 组件都应该默认使用主题的调色板，因此除非你需要明确控制组件的颜色(例如，当组件被设计为使用主色调，但你想使用辅助色调)，否则访问调色板的最简单方法是覆盖组件样式正如 Backstage 建议的那样。

在 Material UI 组件中覆盖主题颜色并不是一个很常见的用例，但假设你有一个自定义侧边栏组件，该组件带有一个 Paper 组件，可以用不同的颜色突出显示其内容，用于侧边菜单或其他内容(通常你会使用立面，但也许设计者想要一个多彩的应用程序)。 你可以这样使用主题：

import { makeStyles, Paper } from '@material-ui/core';

const useStyles = makeStyles((theme: Theme) => ({
  sidebarPaper: {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.primary.contrastText,
  },
}));

export function Sidebar({ children }) {
  const { sidebarPaper } = useStyles();
  return <Paper className={sidebarPaper}>{children}</Paper>;
}

这里有一个链接默认调色板值你可以使用，令牌将是相同的，改变的是与这些令牌相关的颜色，这取决于你的应用程序主题色调，还有一个默认主题资源管理器来查看哪些标记可以用作已编译主题的引用。

排版​

大多数情况下，Material UI 的组件会使用<Typography />组件将使用主题的排版属性，如字体家族、大小、重量和调色板中适合该组件上下文的颜色。 例如，包含的按钮使用白色字体颜色，或在未勾勒出适当对比度时，通过道具传递相应的颜色(深色主题中的按钮通过使用深色字体而非白色字体进行适当调整)。

不过，如果内容的父组件不处理文本，比如父组件是一个布局组件，则可以使用排版组件来代替 HTML 对应组件，通常用于标题和段落，但也适用于任何类型的文本。

检查排版文档了解如何安装、使用和定制语义元素，特别是有关可访问性的建议。