renderSomePageWithButton = buttonAction => <div> <NPrimaryButtonFullWidth label={'プライマリボタン幅MAX'} /> <NSecondaryButtonRounded label={'角丸セカンダリボタン '} /> <NAccentButtonHalfWidth label={'アクセントボタン幅半分 '} /> </div> import React, { Component }from 'react'; import RaisedButton from 'material-ui/RaisedButton'; import { buttonColor, buttonSize, buttonShape } from './button_styles'; function createButton(WrappedComponent, color, size, shape) { return class designedButtonComponent extends Component { render() { return (<WrappedComponent {...this.props} {...buttonColor[color]} {...buttonSize[size]} {...buttonShape[shape]} />); } } } export const PrimaryButtonFullWidth = createButton(RaisedButton, 'primary', 'fullWidth', 'square'); export const SecondaryButtonRounded = createButton(RaisedButton, 'secondary', 'original', 'round'); export const AccentButtonHalfWidth = createButton(RaisedButton, 'accent', 'halfWidth', 'original');