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

};
      }
    }
  },
  ({ theme }) => ({
    padding: '2px 10px',
    backgroundColor: theme.inputFill,
    color: 'inherit',
    lineHeight: '36px',
    minWidth: 50,
    display: 'inline-block',
    textAlign: 'center',
  })
);

const Title = styled.h4({
  marginTop: 0,
  textAlign: 'left',
  color: 'inherit',
});

const Table = styled.table({
  borderCollapse: 'collapse',
});

const CommandDescription = styled.span({
  fontSize: 12,
  color: 'inherit',
});

// manage two separate shortcut keys for
// 'mac' & other (windows, linux) platforms

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
  const pageIndex = props.pages.findIndex(
    ({node}) => node.frontmatter.path === path
  );

  // assign next and previous pages

import withProps from 'recompose/withProps'
import {colors, smallCaps} from 'gatsby-theme-base'

const Container = styled.div({
  border: `1px solid ${colors.divider}`,
  borderRadius: 4,
  margin: '1.5em 0',
  overflow: 'hidden'
})

const Header = styled.div({
  padding: '1.25rem',
  backgroundColor: colors.background
})

const MainHeading = styled.h4({
  marginBottom: 0
})

const StyledCode = styled.code({
  padding: '0 !important',
  background: 'none !important'
})

const Subheading = styled.h6({
  marginTop: 12,
  marginBottom: 0
})

const Body = styled.div({
  padding: '1.25rem'
})

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 = {
    data: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired
  };

  componentDidMount() {</a>

import PropTypes from 'prop-types';
import React from 'react';
import SelectLink from './select-link';
import styled from '@emotion/styled';
import {
  GA_EVENT_CATEGORY_SIDEBAR,
  getVersionBasePath,
  trackEvent
} from '../utils';
import {SidebarNav, colors, headerHeight} from 'gatsby-theme-apollo-core';

const headerPadding = 4;
const ContentHeader = styled.h4({
  color: colors.primary,
  backgroundColor: 'rgba(255, 255, 255, 0.85)',
  position: 'sticky',
  top: headerHeight
});

const HeaderInner = styled.span({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  margin: `-${headerPadding}px 0`,
  padding: `${headerPadding}px 0`,
  paddingRight: 10
});

const HeaderText = styled.span({

import PropTypes from 'prop-types';

import styled from '@emotion/styled';

const TreeHeader = styled.h4(({ theme }) => ({
  textTransform: 'uppercase',
  letterSpacing: '1.2px',
  fontSize: '12px',
  fontWeight: 'normal',
  color: theme.dimmedTextColor,
  textAlign: 'left',
  padding: '0 13px 5px 13px',
  margin: 0,
  overflow: 'hidden',
  ...theme.treeHeader,
}));

TreeHeader.propTypes = {
  children: PropTypes.string.isRequired,
};

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'
});

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

background: bg,
  backgroundSize: 'cover',
  backgroundPosition: 'center',
}));

const Box = styled.div({
  listStyle: 'none',
  paddingLeft: 10,
  paddingRight: 10,
});

const Name = styled.h4({
  float: 'left',
  fontWeight: 'bold',
});
const Value = styled.h4({
  float: 'right',
  fontWeight: 'normal',
});

const Swatch = ({ name, value, setBackground }) => (
  <button> setBackground(value)} onMouseDown={event =&gt; event.preventDefault()}&gt;
    
    
      {name}:
      
        <em>{value}</em>
      
    
  </button>
);
Swatch.propTypes = {

import withProps from 'recompose/withProps';
import {colors, smallCaps} from 'gatsby-theme-apollo-core';

const Container = styled.div({
  border: `1px solid ${colors.divider}`,
  borderRadius: 4,
  margin: '1.5em 0',
  overflow: 'hidden'
});

const Header = styled.div({
  padding: '1.25rem',
  backgroundColor: colors.background
});

const MainHeading = styled.h4({
  marginBottom: 0
});

const StyledCode = styled.code({
  padding: '0 !important',
  background: 'none !important'
});

const Subheading = styled.h6({
  marginTop: 12,
  marginBottom: 0
});

const Body = styled.div({
  padding: '1.25rem'
});

import PropTypes from 'prop-types'
import React from 'react'
import SelectLink from './select-link'
import styled from '@emotion/styled'
import {
  GA_EVENT_CATEGORY_SIDEBAR,
  getVersionBasePath,
  trackEvent
} from '../utils'
import { SidebarNav, colors, headerHeight } from 'gatsby-theme-base'

const ContentHeader = styled.h4({
  color: colors.primary,
  backgroundColor: 'rgba(255, 255, 255, 0.85)',
  position: 'sticky',
  top: headerHeight
})

function handleToggleAll(expanded) {
  trackEvent({
    eventCategory: GA_EVENT_CATEGORY_SIDEBAR,
    eventAction: 'toggle all',
    eventLabel: expanded ? 'expand' : 'collapse'
  })
}

function handleToggleCategory(title, expanded) {
  trackEvent({