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

Question

I have a page made up of many sub-components. The page folder holds the page file, external styles file and each sub-components folders - which also consists of their own style.

I'm not sure how to set up an external shared common style file for all sub-components along with external styles for each of the sub-components.

Ie. DemoStyles.js is the common styles and Demo.js is where are the sub-components are called.

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

The title style is not being applied.

The className is set in the Red.js file:

---

TL;DR: I need one common external style file to apply to all subcomponents living in one folder; and each subcomponent needs their own external style specific to it.

Here is the code sample: https://codesandbox.io/s/rypoqk07lo

---

SOLVED: I solved this by importing the demoStyles into the RedStyles.js file and then calling it with the spread operator and passing theme as an argument like so:

RedStyles.js

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

code sample updated as well

Answer 1

You forgot to pass the classes props on Demo.js to your components like you do on <Red /> and <Blue /> .

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

Its good to remember that Material-UI has themes support . It's better to use it on Demo.js depending of what you trying to do.