styled components + material ui

<StyledTypography>
<StyledTypography Helper>

const styles = theme => ({
    heading: {
        fontSize: theme.typography.pxToRem(17),
        fontWeight: theme.typography.fontWeightBold,
    },
    secondaryHeading: {
        fontSize: theme.typography.pxToRem(15),
        fontStyle: 'italic',
        color: theme.palette.text.secondary,
    }
})
 
 
// ... 
<Typography className={classes.heading}>
    привет
</Typography>
 
<Typography className={classes.secondaryHeading}>
    мир
</Typography>
// ...

import styled from 'styled-components';
import { withTheme } from "@material-ui/core/styles"
import { Typography } from '@material-ui/core';
 
export const Column = styled.div`
    flex-basis: 40%;
`
 
export const StyledTypography = withTheme(styled(Typography)`
    font-size: ${props => props.theme.typography.pxToRem(17)};
    font-weight: ${props => props.theme.typography.fontWeightBold};
 
    ${props => props.Helper`
        font-size: ${props => props.theme.typography.pxToRem(15)};
        font-style: italic;
        color: ${props => props.theme.palette.text.secondary};
    `}
`)