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

lineHeight: 1,
  margin: `0 ${innerGutter}px`,
  paddingBottom: innerGutter,
  paddingTop: innerGutter,

  // ensure that box-shadow covers body content
  position: 'relative',
  zIndex: 1,
});
const Header = styled(HeadFoot)({
  boxShadow: `0 2px 0 ${alpha(colors.text, 0.12)}`,
});
const Footer = styled(HeadFoot)({
  boxShadow: `0 -2px 0 ${alpha(colors.text, 0.12)}`,
});
const Title = styled.h3({
  fontSize: 18,
  fontWeight: 500,
  margin: 0,
});
const Body = styled.div({
  lineHeight: 1.4,
  overflowY: 'auto',
  padding: innerGutter,
});

// Dialog
// ------------------------------

type Props = {
  attachTo: HTMLElement,
  children: Node,

lineHeight: 1,
  margin: `0 ${innerGutter}px`,
  paddingBottom: innerGutter,
  paddingTop: innerGutter,

  // ensure that box-shadow covers body content
  position: 'relative',
  zIndex: 1,
});
const Header = styled(HeadFoot)({
  boxShadow: `0 2px 0 ${alpha(colors.text, 0.12)}`,
});
const Footer = styled(HeadFoot)({
  boxShadow: `0 -2px 0 ${alpha(colors.text, 0.12)}`,
});
const Title = styled.h3({
  fontSize: 18,
  fontWeight: 500,
  margin: 0,
});
const Body = styled.div({
  lineHeight: 1.4,
  overflowY: 'auto',
  padding: innerGutter,
});

// Dialog
// ------------------------------

type Props = {
  attachTo: HTMLElement,
  children: Node,

lineHeight: 1,
  margin: `0 ${innerGutter}px`,
  paddingBottom: innerGutter,
  paddingTop: innerGutter,

  // ensure that box-shadow covers body content
  position: 'relative',
  zIndex: 1,
});
export const Header = styled(HeadFoot)({
  boxShadow: `0 2px 0 ${alpha(colors.text, 0.12)}`,
});
export const Footer = styled(HeadFoot)({
  boxShadow: `0 -2px 0 ${alpha(colors.text, 0.12)}`,
});
export const Title = styled.h3({
  fontSize: 18,
  fontWeight: 500,
  margin: 0,
});
export const Body = styled.div({
  lineHeight: 1.4,
  overflowY: 'auto',
  padding: innerGutter,
});

grouper: (list, key) => ,
    });

  return <pre>{data}</pre>;
};
Message.propTypes = {
  msg: PropTypes.string.isRequired,
};

const Head = styled.header({
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'flex-start',
});

const Title = styled.h3({
  padding: '10px 10px 0 10px',
  margin: 0,
});

export const FailedResult = styled(({ fullName, title, status, failureMessages, className }) =&gt; (
  <div>
    
      
        
        <title>{fullName || title}</title>
      
      </div>

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

export default function Docs(props) {
  const {version, versions, frontmatter, content} = props.pageContext;
  const {title, description} = frontmatter;
  const {subtitle, basePath} = props.data.site.siteMetadata;

flexGrow: 1,
    flexBasis: '100%',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    ':hover, :focus': {
      backgroundColor: colors.N10,
      textDecoration: 'none',
    },
    ':active': {
      backgroundColor: colors.N10,
    },
  };
});

export const PrimaryNavHeading = styled.h3(({ depth }) => ({
  color: colors.N40,
  fontSize: '0.85em',
  fontWeight: 'bold',
  marginTop: '2em',
  paddingLeft: depth ? PRIMARY_NAV_GUTTER * depth : PRIMARY_NAV_GUTTER,
  paddingRight: PRIMARY_NAV_GUTTER,
  textTransform: 'uppercase',
}));

animation: `${intro} .2s ease-out`,
}));

const PanelHeader = styled.div(({ theme }) => ({
  background: theme.background,
  borderTopLeftRadius: borderRadius,
  borderTopRightRadius: borderRadius,
  flexShrink: 0,
  padding: '10px 30px',
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  color: theme.background,
}));

const PanelTitle = styled.h3(({ theme }) => ({
  fontSize: 28,
  fontWeight: 'normal',
  margin: 0,
  color: theme.primary,
}));

const PanelBody = styled.div(
  ({ theme }) => ({
    background: color.darken(theme.background, 0.3),
    borderBottomLeftRadius: borderRadius,
    borderBottomRightRadius: borderRadius,
    flexGrow: 1,
    padding: '20px 30px',
    position: 'relative',
  }),
  ({ scrollable }) => ({

padding: '40px 56px',
  paddingRight: 0,
  position: 'sticky',
  top: headerHeight,
  [breakpoints.lg]: {
    display: 'none',
  },
  [breakpoints.md]: {
    display: 'block',
  },
  [breakpoints.sm]: {
    display: 'none',
  },
})

const AsideHeading = styled.h3({
  fontWeight: 600,
  fontSize: '1.225rem',
  marginBottom: '1.0875rem',
})

const AsideLinkWrapper = styled.h4({
  display: 'flex',
  fontSize: '1rem',
  marginBottom: 0,
  ':not(:last-child)': {
    marginBottom: 16,
  },
})

const AsideLinkInner = styled.a({
  display: 'flex',