材质UI的主题是什么？

Question

我正试图了解主题到底是什么以及它们试图代表什么。我已经阅读了文档，但对我来说仍然没有意义。

例如，下面是我所指的一段代码。

我只想知道theme应该代表什么，它来自哪里以及为什么使用它。

const styles = theme => ({
root: {
    display: 'flex',
},

toolbar: {
    paddingRight: 24, // keep right padding when drawer closed
},

toolbarIcon: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end',
    padding: '0 8px',
    ...theme.mixins.toolbar,
},
});

Answer 1

Material-UI文档非常全面地介绍了这一点，但是文档中有一些不同的部分对于理解您发布的代码是必需的。

• https://material-ui.com/customization/themes/
  • 这是主题的主要文档
• https://material-ui.com/customization/css-in-js/
  • 您需要了解CSS-in-JS方面如何工作，以了解如何使用styles变量
• https://material-ui.com/customization/css-in-js/#withstyles-styles-options-higher-order-component
  • 特别是withStyles函数通常会接收styles变量作为参数，然后负责注入主题。
• https://material-ui.com/customization/themes/#createmuitheme-options-theme
  • 这部分描述了如何创建主题。
• https://material-ui.com/customization/themes/#muithemeprovider
  • 这说明了如何为您的应用程序提供自定义主题（当您使用其组件或方法（如withStyles时，Material-UI会在必要时自动将其注入），但是Material-UI自动提供默认设置如果您未提供自定义主题，则该主题正在发挥作用。

关于为什么使用主题，文档涵盖了其中的一些内容，但是一个用例是控制配色方案。例如，如果您有一个多租户应用程序（一个代码库用于多个客户），则可能需要支持使用特定于每个客户品牌的颜色。主题提供了一种方法，只需在应用程序的根目录提供一个不同的主题，即可动态更改颜色，字体和其他外观方面。在您发布的特定示例中，该主​​题用于获取一些CSS，以显示Material-UI的默认主题中包含的工具栏外观，但可以在自定义主题中覆盖。

以下是Material-UI代码，负责theme.mixins.toolbar：https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/styles/createMixins.js

的默认设置

这是该代码的相关摘录：

toolbar: {
      minHeight: 56,
      [`${breakpoints.up('xs')} and (orientation: landscape)`]: {
        minHeight: 48,
      },
      [breakpoints.up('sm')]: {
        minHeight: 64,
      },
    }

Answer 2

您可以（可选）通过createMuiTheme创建自己的主题。 这些主题及其变量（颜色，默认值，间距或任何您想要的东西）都可以按照您的样式进行访问，然后通过主题争论将其添加到withstyle中。

好东西，例如在任何地方都具有相同的填充或边距。