Material-UI의 withStyles에서 지정하는 stylesCreator에서 부모로부터 props로 받은 값을 동적으로 적응시키는 HOC

npx create-react-app my-app
cd my-app
yarn add @material-ui/core
touch src/button.jsx 
yarn start

import React, { Component } from "react";
import { withStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const styles = theme => ({});

const ExtendButton = props => {
  const { children } = props;
  return <Button variant="contained">{children}</Button>;
};

export default withStyles(styles)(ExtendButton);

import React, { Component } from "react";
import Button from "./button";

class App extends Component {
  render() {
    return (
      <div>
        <Button>Hello World</Button>
      </div>
    );
  }
}

export default App;

const styles = theme => ({
  contained: {
    backgroundColor: "green"
  }
});

const ExtendButton = props => {
  const { classes, children } = props;

  return (
    <Button
      variant="contained"
      classes={{
        contained: classes.contained
      }}
    >
      {children}
    </Button>
  );
};

 return (
      <div>
        <Button backgroundColor="green">Hello World</Button>
        <Button backgroundColor="red">Hello World</Button>
        <Button backgroundColor="blue">Hello World</Button>
      </div>
    );

touch src/withStylesProps.jsx

import { withStyles } from "@material-ui/core/styles";
import * as React from "react";

const withStylesProps = styles => Component => props => {
  const Comp = withStyles(styles(props))(Component);
  return <Comp {...props} />;
};

export default withStylesProps;

import React, { Component } from "react";
import Button from "./button";

class App extends Component {
  render() {
    return (
      <div>
        <Button backgroundColor="green">Hello World</Button>
        <Button backgroundColor="red">Hello World</Button>
        <Button backgroundColor="blue">Hello World</Button>
      </div>
    );
  }
}

export default App;

import React, { Component } from "react";
import withStylesProps from "./withStylesProps";
import Button from "@material-ui/core/Button";

const styles = props => ({
  contained: {
    backgroundColor: props.backgroundColor
  }
});

const ExtendButton = props => {
  const { classes, children } = props;

  return (
    <Button
      variant="contained"
      classes={{
        contained: classes.contained
      }}
    >
      {children}
    </Button>
  );
};

export default withStylesProps(styles)(ExtendButton);