Material-UIのwithStylesで指定するstylesCreatorの中で親からpropsとして受け取った値を動的に適応させるHOC

:writing_hand: [Can withStyles pass props to styles object?](https://github.com/mui-org/material-ui/issues/8726)

Material-UIのstyleのカスタムに関しては、こちらの記事が簡潔で分かりやすいので諸々の説明は割愛。
[material-uiの見た目を調整する3つの方法](https://qiita.com/junara/items/b8251bcb75760467aca4)

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

初手デフォルト設定

```jsx:src/button.jsx
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);
```

```jsx:src/App.js
import React, { Component } from "react";
import Button from "./button";

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

export default App;
```

<img width="300" alt="452.png" src="https://qiita-image-store.s3.amazonaws.com/0/259253/83c5955c-6b34-9118-1dc5-b6020c9625db.png">


お次はデフォルト設定をハック

```jsx:src/button.jsx
const styles = theme => ({
  contained: {
    backgroundColor: "green"
  }
});

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

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

<img width="300" alt="747.png" src="https://qiita-image-store.s3.amazonaws.com/0/259253/cc1282a4-7157-5ac4-9ea4-73621347dcd5.png">

すると人はこうしたくなってくる

```jsx:src/App.js
 return (
      <div>
        <Button backgroundColor="green">Hello World</Button>
        <Button backgroundColor="red">Hello World</Button>
        <Button backgroundColor="blue">Hello World</Button>
      </div>
    );
```

そんな時は[HOC](https://reactjs.org/docs/higher-order-components.html)の出番

```bash:今回の目玉HOCを作ってゆきます
touch src/withStylesProps.jsx
```

```jsx: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;
```

最終的にこんな感じになる

```jsx:src/App.js
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;
```

```jsx:src/button.jsx
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);
```

<img width="315" alt="747.png" src="https://qiita-image-store.s3.amazonaws.com/0/259253/174eac23-8a93-4d2d-82b6-53162a849ecd.png">


:moyai: 「...themeを継承できるものも用意した方がええな」