Question

我正在制作反应网络应用程序。

尝试使用 material-ui @ next 作为用户界面。

我正在阅读材料-ui @ next的演示，（例如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, }

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

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

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

谢谢！

Answer 1

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

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 prop是一个对象，它将styles中指定的类名映射到文档中定义的实际名称。

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

什么是'主题'/'课程'？

1 个答案: