React component Material UI withStyles: Variables in styles? - reactjs

Question

Is there a way to use variables in my React components using Material UI and withStyles? How can replace the repeated '20px' in the styles const below with a variable? Is this possible?
import React, { Component } from 'react';
import { withStyles } from '#material-ui/core/styles';
import Topnav from '../component/Topnav';
import Footer from '../component/Footer';
const styles = {
root: {
flexGrow: 1,
},
grow: {
flexGrow: 1,
},
margin: {
marginLeft: '20px',
marginRight: '20px',
marginTop: '20px',
}
};
class MainLayoutComp extends Component {
render = props => {
const { children, classes } = this.props;
return (
<>
<Topnav />
<div className={classes.margin}>
{children}
<Footer />
</div>
</>
);
}
}
const MainLayout = withStyles(styles)(MainLayoutComp);
export default MainLayout;

Answer 1

The answer below is specific to this question of replacing repeated values in the styles, but may not be what most people are looking for based on the title of the question. If you are wanting dynamic styles based on props, see the following questions:
How to allow customization of a React component's style via props, when withStyles api is used?
Send Variable to withStyles in Material UI?
It's just JavaScript, so you can do the following:
const myMargin = '20px';
const styles = {
root: {
flexGrow: 1,
},
grow: {
flexGrow: 1,
},
margin: {
marginLeft: myMargin,
marginRight: myMargin,
marginTop: myMargin,
}
};
Also, you can easily leverage your theme by using a function for the styles. withStyles will pass the theme as an argument:
const styles = (theme) => ({
root: {
flexGrow: 1,
},
grow: {
flexGrow: 1,
},
margin: {
marginLeft: theme.spacing.unit * 3,
marginRight: theme.spacing.unit * 3,
marginTop: theme.spacing.unit * 3,
}
});
Here's a working example showing both: