Use styled-system properties inside of styled component definition with Emotion (not default props)

[garrettg123]

How can one use, for example, the fontSize property, while creating a styled component?

In the following case, it's possible to set the font size and color using the defaultProps. Is there a way to set them inside of the styled.label definition while still being able to add custom css (like display: block below)?

import styled from '@emotion/styled'
import { ThemeType } from './theme'
import { color, ColorProps, fontSize, FontSizeProps } from 'styled-system'

type PropsType = FontSizeProps<ThemeType> & ColorProps<ThemeType>
const Label = styled.label<PropsType>`
  display: block;

  ${fontSize}
  ${color}
`

Label.defaultProps = {
  fontSize: 0,
  color: 'text.default',
}

export default Label