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

img: {
      width: '100%'
    },
    [breakpoints.sm]: {
      width: '100%',
      marginLeft: 0,
      float: 'none'
    }
  }
});

const Chapter = styled.div({
  marginTop: 64
});

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

const SectionTitle = styled.h4({
  marginBottom: 8
});

const SectionDescription = styled.p({
  fontSize: '1rem'
});

export default function Content(props) {
  const {title, description, path, image} = props.page.frontmatter;

  // determine current page's place in the order

return {
    boxSizing: 'border-box',
    flex: 1,
    overflowY: 'auto',
    overflowX: 'hidden',
    minWidth: 140,
    paddingBottom: PRIMARY_NAV_GUTTER,
    width: '100%',

    ':before': before,
    ':after': after,
  };
});

export const BrandItem = styled.h2({
  fontSize: 18,
  fontWeight: 500,
  margin: 0,
  paddingBottom: PRIMARY_NAV_GUTTER,
});

export const PrimaryNavItem = styled(ItemElement)(({ depth, isSelected, mouseIsOverNav }) => {
  const selectedStyles = isSelected
    ? {
        '&, :hover, :active, :focus': {
          ':after': {
            backgroundColor: colors.primary,
          },
        },
      }
    : {};

':hover': {
      textDecoration: 'underline'
    }
  }
});

const Divider = styled.hr({
  width: '100%',
  maxWidth: 400
});

const Chapter = styled.div({
  marginTop: 64
});

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

const SectionTitle = styled.h4({
  marginBottom: 8
});

const SectionDescription = styled.p({
  fontSize: '1rem'
});

const anchorPattern = /<a href="([\w/#-]+)">([\w\s.,-]+)&lt;\/a&gt;/gm;

export default class Page extends Component {
  static propTypes = {</a>

import ContentLoader from '../content-loader';
import LinkItem from './item';

const FriendlyLinksWrap = styled.div`
    background-color: #fff;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    padding: ${rem('28px')} 0;
`;

const Header = styled.header((_) => ({
    textAlign: 'center'
}));

const HeaderTitle = styled.h2((_) => ({
    fontSize: '24px',
    margin: '5px'
}));

const BodyUl = styled.ul((_) => ({
    display: 'flex',
    flexWrap: 'wrap',
    padding: 0,
    margin: 0
}));

const TIP = styled.h3((_) => ({
    color: '#333',
    fontSize: '14px',
    padding: '5px 5px 5px 20px',
    '>i': {

import styled from '@emotion/styled';
import useLocalStorage from '@illinois/react-use-local-storage';

import { TokenGroup } from '../interfaces/token-group.interface';
import { Token } from '../interfaces/token.interface';
import { IconChevronDown, IconChevronRight, IconClose } from './Icons';
import { TokenPresenter } from './Presenter/TokenPresenter';
import { Table } from './Primitives/Table';
import { TokenName } from './TokenName';

const Section = styled.section(() => ({
  marginBottom: '16px'
}));

const Title = styled.h2(() => ({
  color: '#1ea7fd',
  cursor: 'pointer',
  fontSize: '0.9rem',
  fontWeight: 600,

  ':not(:last-child)': {
    marginBottom: '8px'
  },

  '& svg': {
    position: 'relative',
    top: '-1px',
    marginLeft: '-4px',
    verticalAlign: 'middle',
    width: '16px',
    height: '16px'

fontSize: 60,
  },
})

const Form = styled.form({
  width: '100%',
  margin: '0 auto',
  position: 'relative',
  boxSizing: 'border-box',
  padding: '1rem',
  [mediaQuery('medium')]: {
    padding: '2rem',
  },
})

const Explanation = styled.h2({
  padding: '0.5rem',
  margin: '0.5rem 0',
  color: 'white',
  textAlign: 'center',
  lineHeight: 1.5,
  border: '4px solid #fffaf5',
  backgroundColor: 'black',
  borderLeftWidth: 0,
  borderRightWidth: 0,
  fontSize: 16,
  [mediaQuery('medium')]: {
    fontSize: 20,
  },
  [mediaQuery('large')]: {
    fontSize: 24,
  },

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

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

const Subheading = styled.h2({
  color: colors.text2,
  fontSize: `1.4427rem`,
})

export default function PageHeader(props) {
  return (
    <div>
      {props.title}
      {props.description &amp;&amp; {props.description}}
    </div>
  )
}

PageHeader.propTypes = {
  title: PropTypes.string.isRequired,
  description: PropTypes.string,

}));

const ContainerComponent = styled.div(({ width }) => ({
  width,
  marginLeft: 'auto',
  marginRight: 'auto',
}));

const Container = ({ width = 768, children }) =>
  width ? (
    {children}
  ) : (
    children
  );

const FullScreenHeader = styled.h2(({ theme }) => ({
  gridArea: 'header',
  color: theme.primary,
  fontSize: 24,
  fontWeight: 'normal',
  textAlign: 'center',
}));

const InnerHeader = styled.div(({ theme }) => ({
  padding: '20px 0',
  borderBottom: `2px solid ${theme.primary}`,
}));

const FullScreenBody = styled.div({
  gridArea: 'body',
  padding: '20px 0',
  overflowY: 'auto',

}))

const TextWrapper = styled.p(props => ({
   fontFamily: theme.fontFamily,
   fontSize: '16px',
   fontWeight: props.bold ? theme.weight.bold : theme.weight.normal,
   color: props.dark ? theme.color.dark : theme.color.grey,
   textAlign: props.align,
   lineHeight: '1.45em',
   outline: 0,
   '& + &': {
      marginTop: '20px'
   }
}))

const MediumTextWrapper = styled.h2(props => ({
   margin: props.margin,
   fontFamily: theme.fontFamily,
   fontSize: '18px',
   fontWeight: theme.weight.bold,
   color: theme.color.dark,
   textAlign: props.align,
   lineHeight: '1.35em',
}))

const HeadingTextWrapper = styled.h1(props => ({
   margin: props.margin,
   fontFamily: theme.fontFamily,
   fontSize: '30px',
   fontWeight: theme.weight.extraBold,
   color: theme.color.dark,
   textAlign: props.align