Returning a Dynamic Styled Component - styled-components

Question

I'm trying to return this element but if I try to style it after importing it, it wont apply the correct styles.
Heading.js:
export default ({
element = 'h1',
}) => new styled[element]`
margin: 0 0 ${shevy[element].marginBottom};
font-family: Plain, sans-serif;
font-size: ${shevy[element].fontSize};
line-height: ${shevy[element].lineHeight};
text-transform: uppercase;
`()
SomeOtherComponent.js:
const LeadHeading = styled(Heading)`
margin: 0 0 ${bs(3)};
font-size: ${h4.fontSize};
line-height: ${h4.lineHeight};
color: red;
`
<LeadHeading>Yup</LeadHeading>
The color is applied correctly but font-size, line-height, and margin aren't applied correctly.

Answer 1

I was doing something hacky, instead I should've been using withComponent: https://www.styled-components.com/docs/basics#extending-styles.
Ended up doing:
import styled from 'styled-components'
import shevy from 'common/shared/utils/shevy'
const Heading = styled.h1`
font-family: Plain, sans-serif;
text-transform: uppercase;
`
const extend = tag => `
margin: 0 0 ${() => shevy[tag].marginBottom};
font-size: ${() => shevy[tag].fontSize};
line-height: ${() => shevy[tag].lineHeight};
`
Heading.h1 = Heading
Heading.h2 = Heading.withComponent('h2').extend(extend('h2'))
Heading.h3 = Heading.withComponent('h3').extend(extend('h3'))
Heading.h4 = Heading.withComponent('h4').extend(extend('h4'))
Heading.h5 = Heading.withComponent('h5').extend(extend('h5'))
Heading.h6 = Heading.withComponent('h6').extend(extend('h6'))
export default Heading