Is there a more efficient way to apply the same set of CSS styles to multiple media query rules without repetition? Currently, the only workaround seems to be:
[theme.breakpoints.up('xl')]: {
color: 'red',
backgroundColor: 'green',
border: '1px solid blue',
fontSize: 17,
marginTop: 3,
padding: 7,
display: 'flex',
flexDirecton: 'column',
},
[theme.breakpoints.only('md')]: {
color: 'red',
backgroundColor: 'green',
border: '1px solid blue',
fontSize: 17,
marginTop: 3,
padding: 7,
display: 'flex',
flexDirecton: 'column',
},
[theme.breakpoints.down('xs')]: {
color: 'red',
backgroundColor: 'green',
border: '1px solid blue',
fontSize: 17,
marginTop: 3,
padding: 7,
display: 'flex',
flexDirecton: 'column',
}