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

import { colors } from '../../utils/colors'
import { smallCaps } from '../../utils/typography'

const StyledList = styled.ul({
  marginLeft: 0,
  listStyle: 'none'
})

const listItemStyles = {
  color: 'inherit',
  ':hover': {
    opacity: colors.hoverOpacity
  }
}

const StyledListItem = styled.li({
  fontSize: '1rem',
  a: {
    ...listItemStyles,
    textDecoration: 'none',
    display: 'block',
    // paddingLeft: '5px',
    width: '80%',
    '&.active': {
      color: colors.primary,
      pointerEvents: 'none'
    }
  }
})

const ExpandAll = styled.button(listItemStyles, smallCaps, {
  display: 'flex',

export const ul = styled.ul({
  marginTop: 20,
  paddingLeft: 20,

  '& li': {
    marginTop: 10
  },

  '& ol, & ul': {
    marginLeft: 20,
    marginTop: 10
  }
})

export const li = styled.li(textStyles, {
  marginTop: 10,
  p: { marginTop: 5, marginBottom: 0 },
  '& > ul, & > ol': {
    marginTop: 5,
    marginBottom: 15,
    '& > li': {
      marginTop: 5
    }
  }
})

export const img = styled.img`
  max-height: 360px;
  margin: 0 auto;
`

fontSize: 14,
  color: colors.primary,
  textAlign: 'center',
  backgroundColor: 'white',
  position: 'absolute',
  top: 0,
  left: lineItemNumberSize / -2
})

export const ExpansionPanelList = styled.ul({
  marginLeft: lineItemNumberOffset,
  borderLeft: `1px solid ${colors.primary}`,
  listStyle: 'none'
})

const StyledListItem = styled.li({
  marginBottom: 0,
  paddingLeft: lineItemNumberOffset + 8,
  fontSize: '1rem',
  lineHeight: 1.5,
  position: 'relative',
  ':not(:last-child)': {
    marginBottom: 28
  },
  h4: {
    lineHeight: 1.3
  }
})

export function ExpansionPanelListItem(props) {
  return (

import { smallCaps } from 'gatsby-theme-apollo-core/src/utils/typography'
import wpgqlColors from '../../../utils/colors'

const StyledList = styled.ul({
  marginLeft: 0,
  listStyle: 'none',
})

const listItemStyles = {
  color: 'inherit',
  ':hover': {
    opacity: colors.hoverOpacity,
  },
}

const StyledListItem = styled.li({
  fontSize: '1rem',
  lineHeight: 'inherit',
  a: {
    ...listItemStyles,
    textDecoration: 'none',
    '&.active': {
      color: wpgqlColors.primary,
      pointerEvents: 'none',
    },
  },
})

const ExpandAll = styled.button(listItemStyles, smallCaps, {
  display: 'flex',
  alignItems: 'center',
  marginBottom: 12,

const Container = styled.div({
  padding: 10,
});
const Row = styled.div({
  marginTop: 5,
  marginBottom: 5,
});
const Heading = styled.div<{level: number}>(props => ({
  fontSize: props.level === 1 ? 18 : 12,
  textTransform: props.level > 1 ? 'uppercase' : undefined,
  color: props.level > 1 ? '#90949c' : undefined,
  marginTop: 10,
  marginBottom: 10,
  fontWeight: props.level > 1 ? 'bold' : 'normal',
}));
const ListItem = styled.li({
  'list-style-type': 'circle',
  'list-style-position': 'inside',
  marginLeft: 10,
});
const Strong = styled.span({
  fontWeight: 'bold',
  color: '#1d2129',
});
const Emphasis = styled.span({
  fontStyle: 'italic',
});
const Quote = styled(Row)({
  padding: 10,
  backgroundColor: '#f1f2f3',
  fontSize: 13,
});

import React from "react"
import { graphql } from "gatsby"
import styled from "@emotion/styled"
import { css } from "@emotion/core"
import { FaGithub } from "react-icons/fa"

import Layout from "../components/layout"
import { colors } from "../utils/presets"

const FeatureList = styled(`ul`)`
  margin-left: 0;
  list-style: none;
`

const FeatureListItem = styled.li({
  backgroundImage: `url(
    "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='${colors.gatsby}' d='M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z' /%3E%3C/svg%3E")`,
  backgroundPosition: `0 .25em`,
  backgroundRepeat: `no-repeat`,
  backgroundSize: `1em`,
  paddingLeft: `1.5em`,
})

const Index = ({ data, location }) => (
  
    <p></p>

import emotion from '@emotion/styled';

export const Folder = emotion.li({
  marginBottom: 5
});

export const Folders = emotion.ul({
});

export const Description = emotion.div({
  fontSize: 14
});

import Slugger from 'github-slugger'
import striptags from 'striptags'
import styled from '@emotion/styled'
import useScroll from 'react-use/lib/useScroll'
import useWindowSize from 'react-use/lib/useWindowSize'
import { MainRefContext, trackEvent } from 'gatsby-theme-apollo-docs/src/utils'
import { colors } from 'gatsby-theme-apollo-core'
import wpgqlColors from '../../utils/colors'

const StyledList = styled.ul({
  marginLeft: 0,
  marginBottom: 48,
  overflow: 'auto',
})

const StyledListItem = styled.li(props => ({
  listStyle: 'none',
  fontSize: '1rem',
  lineHeight: 'inherit',
  color: props.active ? wpgqlColors.primary : colors.primary,
  marginTop: props.newSection ? `1rem` : false,
  a: {
    color: 'inherit',
    textDecoration: 'none',
    paddingLeft: props.depth > 2 ? `${props.depth - 2}rem` : 0,
    display: 'block',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    ':hover': {
      opacity: colors.hoverOpacity,
    },
  },

fontSize: '14px',
    padding: '5px 5px 5px 20px',
    '>i': {
        marginRight: '5px',
    }
}));

const HR = styled.hr((_) => ({
    margin: '20px 0',
    height: '3px',
    border: 'none',
    backgroundColor: '#ccc',
    backgroundImage: 'repeating-linear-gradient(-45deg, #fff, #fff 4px, transparent 4px, transparent 8px)'
}));

const LI = styled.li((_) => ({
    fontSize: '14px',
    listStyle: 'circle',
    padding: '5px'
}));

const Jump = styled(Link)((_) => ({
    fontSize: '14px',
    color: '#f51c1c',
    textDecoration: 'none'
}));

class FriendlyLinks extends Component {

    public static asyncData(store: any) {
        return store.dispatch(fetchLinks());
    }

import emotion from '@emotion/styled';

export const Folder = emotion.li({
  marginBottom: 5
});

export const Folders = emotion.ul({
});

export const Description = emotion.div({
  fontSize: 14
});