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

我有一个由许多子组件组成的页面。页面文件夹包含页面文件、外部样式文件和每个子组件文件夹，这些文件夹也包含它们自己的样式

我不知道如何为所有子组件以及每个子组件的外部样式设置外部共享公共样式文件

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

Demo.js：

未应用标题样式

类名在Red.js文件中设置：

TL；博士： 我需要一个通用的外部样式文件来应用于一个文件夹中的所有子组件；每个子组件都需要自己特定的外部样式

以下是代码示例：

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

RedStyles.js

---

代码示例也更新了

您忘记了将Demo.js上的类道具传递给组件，就像在和上一样

---

很高兴能记住UI中的材质。最好在Demo.js上使用它，具体取决于您要做什么

也许因为您要从DemoStyles.js导入样式，您应该从DemoStyles.js vs theme导出样式？您的标题样式不适用，因为您不使用类。你可以在这里找到一个例子：完美！我也在使用主题支持，但在演示代码示例中没有设置。我有很多组件和一些定制主题；将每个组件的样式与定制的主题支持分开似乎是目前最有意义的。可处理错误：警告：材质UI：SimpleCard中未实现提供给classes属性的键标题。您只能覆盖以下选项之一：红色。哼，您检查过您的手机了吗？它在那里工作。您是否使用与示例相同的材质ui版本？你能分享一下你的“成分”吗；因此，请查看此链接：并打开inspector，您将看到错误。它确实有效，只是有错误。该组件是我的示例中的子组件：。例如，转到blue文件夹，它就是blue.js文件。对于red.js也是一样，我不能在这里粘贴太长的代码。我通过在RedStyles.js中添加title类来消除错误，但这不是一个好的修复方法。我也在材料ui github页面上问过。

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);

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

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

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