How to use the @emotion/styled.h1 function in @emotion/styled

/* global render */
/** @jsx jsx */
import { css } from "@emotion/core";
import styled from "@emotion/styled";

const SomeComponent = styled.div`
	display: flex;
	background-color: ${props => props.color};
`;

const AnotherComponent = styled.h1(
	{
		color: "hotpink",
	},
	props => ({ flex: props.flex })
);

render(
	
		
			<span>
				Some text.
			</span>

test('basic render with object as style', () => {
    const fontSize = 20
    const H1 = styled.h1({ fontSize })

    const tree = renderer.create(<h1>hello world</h1>).toJSON()

    expect(tree).toMatchSnapshot()
  })

test('basic render with object as style', () => {
    const fontSize = 20
    const H1 = styled.h1({ fontSize })

    const tree = renderer.create(<h1>hello world</h1>).toJSON()

    expect(tree).toMatchSnapshot()
  })

fontSize: 18,
  color: colors.primary,
  textDecoration: 'none',
  '&.active': {
    borderColor: colors.secondary
  },
  ':not(:last-child)': {
    marginRight: 24
  }
});

const MainContent = styled.div({
  padding: '40px 64px'
});

const MainHeading = styled.h1({
  ':not(:last-child)': {
    marginBottom: 8
  }
});

const MainSubheading = styled.h3({
  fontWeight: 400,
  color: colors.text2
});

const navItems = {
  '/docs/platform': 'Platform',
  '/docs/tutorial': 'Tutorial',
  '/docs/client': 'Client',
  '/docs/server': 'Server',
  '/docs/community': 'Community'

import PropTypes from 'prop-types'
import React from 'react'
import styled from '@emotion/styled'
import {colors} from 'gatsby-theme-base'

const Heading = styled.h1({
  ':not(:last-child)': {
    marginBottom: 8
  }
})

const Subheading = styled.h3({
  color: colors.text2
})

export default function PageHeader(props) {
  let subTitle
  const titleContent = props.pageTitle || props.title
  const subTitleContent = props.subTitle || props.description
  if (subTitleContent) {
    subTitle = {subTitleContent}
  }

import styled from '@emotion/styled';

import { colors, gridSize } from '../theme';

const truncate = {
  minWidth: 0,
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap',
};

export const SubtleText = styled.span({
  color: colors.N60,
});

export const H1 = styled.h1({
  fontSize: 28,
  fontWeight: 300,
  margin: '24px 0',
});
export const Truncate = ({ as: Tag, ...props }) => ;
Truncate.defaultProps = { as: 'div' };
export const Title = ({ as: Tag, crop, margin, ...props }) => {
  const gutter = gridSize * 3;
  const margins = {
    none: { margin: 0 },
    both: { marginBottom: gutter, marginTop: gutter },
    bottom: { marginBottom: gutter, marginTop: 0 },
    Top: { marginBottom: 0, marginTop: gutter },
  };
  const offset = margins[margin];
  const cropStyles = crop ? truncate : null;

const MenuButton = styled.button({
  padding: 0,
  marginRight: 20,
  color: 'inherit',
  border: 'none',
  background: 'none',
  outline: 'none',
  cursor: 'pointer',
  svg: css(size(24), {
    display: 'block',
    fill: 'currentColor'
  })
});

const MainHeading = styled.h1({
  display: 'flex',
  alignItems: 'center'
});

const HeadingImage = styled.img({
  width: '2em',
  margin: 0,
  marginRight: '0.5em'
});

const Markdown = styled.div({
  a: {
    color: colors.primary,
    textDecoration: 'none',
    ':hover': {
      textDecoration: 'underline'

import React, {Fragment} from 'react';
import styled from '@emotion/styled';
import {
  ContentWrapper,
  PageNav,
  breakpoints,
  colors
} from 'gatsby-theme-apollo-core';
import {Link} from 'gatsby';
import {size} from 'polished';

const InnerWrapper = styled.div({
  maxWidth: 800
});

const MainHeading = styled.h1({
  display: 'flex',
  alignItems: 'center'
});

const descriptionMargin = 4;
const ChapterDescription = styled.h4({
  display: 'block',
  marginTop: descriptionMargin,
  marginBottom: descriptionMargin,
  color: colors.text2
});

const HeadingImage = styled.img(size('2.5em'), {
  margin: 0,
  marginRight: '0.25em'
});

width: 100vw;
  background-color: #fe251b;
  overflow: hidden;
  position: relative;
`

const Header = styled.header`
  box-sizing: border-box;
  background-color: #fffaf5;
  border-bottom: 2px solid #c51104;
  width: 100%;
  padding: 1rem 0.25rem;
  ${position.absolute({ top: true })}
`

const Title = styled.h1({
  margin: 0,
  fontFamily: 'monospace',
  textAlign: 'center',
  fontSize: 40,
  [mediaQuery('medium')]: {
    fontSize: 48,
  },
  [mediaQuery('large')]: {
    fontSize: 60,
  },
})

const Form = styled.form({
  width: '100%',
  margin: '0 auto',
  position: 'relative',