什么是“主题”/“课程”？

Question

我正在制作一个 react 网络应用程序。

尝试使用 ma​​terial-ui@next 作为用户界面。

我正在过material-ui@next的demo，（如https://material-ui-next.com/demos/app-bar/）

每个示例演示代码都使用“主题”或“类”，我想知道它们在给出的任何演示代码中扮演什么角色。

主题、类如下所示

const styles = theme => ({
root: {
    width: '100%',
    height: 1300,
    marginTop: theme.spacing.unit * 3, <<<<<<<<<<<<<<<<< here
    zIndex: 1,
    overflow: 'hidden',
},
.
.
.
.

 render() {
    const { classes, theme } = this.props; <<<<<<<<<<<< classes / theme here
    const { drawer_location, open } = this.state;
.
.
.
.
App.propTypes = {
classes: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired, }

如果您能解释它们在实际应用中的使用方式和原因，我将不胜感激。

我的猜测是这些主题和类正在从父组件传递到当前组件。如果是这样，为什么这些 material-ui 演示代码使用那些？ ? ? （只有一个组件）。 .

我在哪里可以学习如何使用这个“类”/“主题”？？！

谢谢！

Answer 1

在这些示例中，classes 是在使用 withStyles HOC 提供您在代码中定义的样式的 CSS 类名称时添加到您的组件的属性。

withStyles 可以接受一个对象：

const styles = {
  root: {
    width: '100%',
    maxWidth: 360,
  },
};

...或一个函数，如果您需要访问 material-ui 主题对象：

const styles = theme => ({
  root: {
    width: '100%',
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper,
  },
});

下面是使用withStyles 和名为App 的组件的示例：

export default withStyles(styles)(App);

withStyles 接受您的样式对象（或函数）并返回一个接受组件的函数。您提供给结果函数的组件将用 classes 属性装饰。 classes 属性是一个对象，它将styles 中指定的类名称与文档中定义的实际名称进行映射。

请查看有关使用 CSS in JS、overriding CSS classes 和 the usage of withStyles 的文档。