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

Posted 2023-02-22

【中文标题】什么是“主题”/“课程”？

【英文标题】：What is 'theme' / 'classes'?

【发布时间】：2018-08-01 19:26:39

【问题描述】：

我正在制作一个 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 演示代码使用那些？ ? ? （只有一个组件）。 .

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

谢谢！

【问题讨论】：

您是否检查过以下链接：material-ui-next.com/customization/themes/#themes

是的！谢谢！！！！！！！！！！

【参考方案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 的文档。