Use props with withStyle in JSS

WithStyleAndProps.js

import React from 'react';
import {
  withStyles,
  Grid,
  CircularProgress
} from 'material-ui';

// const PreloadComponent = props => {
//   const { classes,size } = props;
//   return (
//     <Grid className={classes.container} container justify={'center'} alignItems={'center'}>
//       <CircularProgress size={size}/>
//     </Grid>
//   )
// };
//
// const Preload = props => {
//   const { size } = props;
//
//   const WithStylesPreloadComponent = withStyles(theme => ({
//     container: {
//       paddingTop: size*2 || 50,
//       paddingBottom: size*2 || 50,
//     }
//   }),{withTheme: true})(PreloadComponent);
//
//   return (
//     <WithStylesPreloadComponent {...props}/>
//   )
// };
//
// Preload.defaultProps = {
//   size: 20
// };
//
// export default Preload;


const PreloadComponent = props => {
  const { classes,size } = props;
  return (
    <Grid className={classes.container} container justify={'center'} alignItems={'center'}>
      <CircularProgress size={size}/>
    </Grid>
  )
};

const StyleWithThemeProps = (props) => {
  return withStyles(theme => ({
    container: {
      paddingTop: props.size*2 || 50,
      paddingBottom: props.size*2 || 50,
    }
  }),{withTheme: true})(PreloadComponent)
};

class PreloadFull extends React.PureComponent {

  constructor(props,context) {
    super(props);
  }

  componentWillMount() {
    this.StyledPreloadFull = StyleWithThemeProps(this.props);
  }

  componentWillUpdate(nextProps) {
    this.StyledPreloadFull = StyleWithThemeProps(nextProps);
  }

  render() {
    const { StyledPreloadFull,props } = this;
    return (
      <StyledPreloadFull {...props}/>
    );
  }
}

PreloadFull.defaultProps = {
  size: 20
};

export default PreloadFull;