Passing styling options using JSS/Material-UI - reactjs

Question

I've written a small wrapper component for the Paper Material-UI Component:
import React from 'react';
import Paper from '#material-ui/core/Paper';
import {withStyles} from '#material-ui/core/styles';
const styles = theme => ({
root: {
...theme.mixins.gutters(),
paddingTop: theme.spacing.unit * 2,
paddingBottom: theme.spacing.unit * 2,
},
});
const PaddedPaper = (props) => {
const {classes, children} = props;
return (
<Paper className={classes.root}>
{children}
</Paper>
);
};
export default withStyles(styles)(PaddedPaper);
Which, as you may have guessed, is used like this:
<PaddedPaper>
<p>Some content.</p>
</PaddedPaper>
With JSS, is it possible to pass padding into PaddedPaper as a prop?
<PaddedPaper padding={20}>
<p>Some content.</p>
</PaddedPaper>
Since styles is defined outside of the PaddedPaper class, and doesn't have access to props, how can I pull this off? Or am I thinking about this entire process incorrectly?

Answer 1

When you're using withStyles, you have access to the theme, but not props.
this is still an ongoing issue : https://github.com/mui-org/material-ui/issues/7633
easiest way to use props in your styles is using inline styles (for now)
like this:
function PaperSheet(props) {
return (
<div>
<PaddedPaper {...props} size={10}>
<Typography variant="headline" component="h3">
This is a sheet of paper.
</Typography>
<Typography component="p">
Paper can be used to build surface or other elements for your
application.
</Typography>
</PaddedPaper>
</div>
);
}
const PaddedPaper = props => {
const { children, size } = props;
console.log(size);
return <Paper style={{ padding: size }}>{children}</Paper>;
};
here is a working example: https://codesandbox.io/s/yl4671wxz