What is the best practice for styling heading?

Hi guys, been trying styled-components for a few days. Soooo great!

BTW, I have something to ask here, Is this kind code is a good approach?

// @flow

import { rem } from 'polished';
import styled, { css } from 'styled-components';

const baseStyles = css`
  color: ${props => props.theme.colors.black || '#222'};
  line-height: 1.2;
`;

const H1 = styled.h1`
  ${baseStyles}
  font-size: ${rem('33px')};
`;

const H2 = styled.h2`
  ${baseStyles};
  font-size: ${rem('28px')};
`;

const H3 = styled.h3`
  ${baseStyles};
  font-size: ${rem('23px')};
`;

const H4 = styled.h4`
  ${baseStyles};
  font-size: ${rem('19px')};
`;

const Heading = {
  H1,
  H2,
  H3,
  H4,
};

module.exports = Heading;

[ezeikel]

Using as and a “level” prop to have one Component for h1-h5

import styled from 'styled-components';

const StyledHeading = styled.h1`
  font-family: var(--heading-font-family);
  font-style: normal;
  color: var(--color-black);
`;

const Heading = ({ level, ...rest }) => {
  return (
    <StyledHeading
      as={`h${level}`}
      {...rest}
    />
  )
};

Heading.defaultProps = {
  level: 1
};

export default Heading;

[nathan-kansu]

Just in case anyone stumbles on here in future, ‘extendWith’ has been renamed to ‘withComponent’. https://www.styled-components.com/docs/api#withcomponent

So this:

const h1 = BaseHeader.extendWith('h1')`
font-size: ${rem(33)};
`

Is now this:

const h1 = BaseHeader.withComponent('h1').extend`
  font-size: ${rem(33)};
`