Material UI如何使用整个组件的一种主要通用样式为子组件设置外部样式

Question

我有一个页面，其中包含许多子组件。页面文件夹包含页面文件，外部样式文件和每个子组件文件夹-它们也包含自己的样式。

我不确定如何为所有子组件设置外部共享的通用样式文件，以及为每个子组件设置外部样式。

即。 DemoStyles.js是常用样式，Demo.js是调用子组件的位置。

Demo.js：

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import styles from "./DemoStyles";
import Red from "./red/Red";
import Blue from "./blue/Blue";

function SharedStyles(props) {
  return (
    <React.Fragment>
      <Red />
      <Blue />
    </React.Fragment>
  );
}

SharedStyles.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(SharedStyles);

DemoStyles.js：

export default theme => ({
  title: {
    color: "white",
    fontSize: 30
  }
});

未应用title样式。

在className文件中设置了Red.js：

---

TL; DR： 我需要一个通用的外部样式文件来应用于生活在一个文件夹中的所有子组件。每个子组件都需要自己专用的外部样式。

下面是代码示例：https://codesandbox.io/s/rypoqk07lo

---

已解决： 我通过将demoStyles导入RedStyles.js文件中，然后使用spread运算符调用它，并将主题作为参数传递来解决了这个问题，

RedStyles.js

import demoStyles from "../DemoStyles";
export default theme => ({
...demoStyles(theme),
red: {
backgroundColor: "red"
}
});

代码示例也已更新

Answer 1

您忘了像在Demo.js和<Red />上一样，将<Blue />上的类props传递给组件。

const { classes } = props;
  return (
    <React.Fragment>
      <Red classes={classes} />
      <Blue classes={classes} />
    </React.Fragment>
  );

请记住，材料界面具有themes support。根据您要执行的操作，最好在Demo.js上使用它。