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

import styled from '@emotion/styled';
import React from 'react';
import { CommentForm } from '../comment-form';
import { CommentItem } from './comment-item';

const CommentsWrap = styled.div((_) => ({
    marginTop: '20px'
}));

const Tip = styled.h3`
    color: rgba(51,51,51,0.8);
    text-align: center;
    font-size: 20px;
`;

const Main = styled.ul((_) => ({
    listStyle: 'none',
    margin: '15px 0 0 0',
    padding: 0
}));

const comemnt = (props: { article: any, comments: any }) => {
    const article = props.article;
    const comments = props.comments;
    return (
        
            --发表评论--
            
            <main>
                {
                    comments.map((item: any, index: number) =&gt; (
                        </main>

import PropTypes from 'prop-types';
import React, {useEffect, useState} from 'react';
import Slugger from 'github-slugger';
import striptags from 'striptags';
import styled from '@emotion/styled';
import useWindowScroll from 'react-use/lib/useWindowScroll';
import useWindowSize from 'react-use/lib/useWindowSize';
import {colors} from 'gatsby-theme-apollo-core';

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

const StyledListItem = styled.li(props => ({
  listStyle: 'none',
  fontSize: '1rem',
  lineHeight: 'inherit',
  color: props.active && colors.primary,
  a: {
    color: 'inherit',
    textDecoration: 'none',
    ':hover': {
      opacity: colors.hoverOpacity
    }

}));

const Tab = React.forwardRef(
  ({ link, icon, text, toolTipText, isActive, ...rest }, ref) => (
    
      
        
          {!!icon && }
          {text}
        
      
    
  )
);

const TabBar = styled.ul({
  display: 'flex',
  justifyContent: 'space-between',
  margin: '0 0 1em',
  padding: 0,
});

Tab.Bar = TabBar;

export default Tab;

import Category from './category'
import PropTypes from 'prop-types'
import React, { Fragment, useEffect, useMemo, useState } from 'react'
import styled from '@emotion/styled'
import usePrevious from 'react-use/lib/usePrevious'
import { IconCollapseList } from '@apollo/space-kit/icons/IconCollapseList'
import { IconExpandList } from '@apollo/space-kit/icons/IconExpandList'
import { Link, withPrefix } from 'gatsby'
import { colors } from 'gatsby-theme-apollo-core/src/utils/colors'
import { size } from 'polished'
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,

mq({
    backgroundColor: 'rgba(117, 63, 131, 0.07)',
    borderRadius: '0.325rem',
    fontSize: ['80%', '85%'],
    margin: 0,
    padding: '0.2rem 0.325rem'
  })
)

export const pre = styled.pre({
  '& > code': {
    padding: 0
  }
})

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 },

import PropTypes from 'prop-types'
import React, {useEffect, useState} from 'react'
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 {colors} from 'gatsby-theme-base'
import {trackEvent} from '../utils'

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

const StyledListItem = styled.li(props => ({
  listStyle: 'none',
  fontSize: '1rem',
  color: props.active && colors.primary,
  a: {
    color: 'inherit',
    textDecoration: 'none',
    ':hover': {
      opacity: colors.hoverOpacity
    }
  }

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': {
        marginRight: '5px',
    }
}));

const HR = styled.hr((_) => ({

display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  border: `1px solid ${colors.primary}`,
  borderRadius: '50%',
  fontSize: 14,
  color: colors.primary,
  textAlign: 'center',
  backgroundColor: 'white',
  position: 'absolute',
  top: 0,
  left: lineItemNumberSize / -2,
  svg: size(iconSize)
});

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',
  ':first-of-type h4': {
    marginTop: 0
  },
  ':not(:last-child)': {
    marginBottom: 28

height: '1px',
    marginTop: '30px',
    marginBottom: '30px',
    border: 'none',
    backgroundImage: 'linear-gradient(0deg, transparent, #fff, transparent)'
}));

const Description = styled.p((_) => ({
    color: '#fff',
    '>a': {
        color: '#fff',
        textDecoration: 'none'
    }
}));

const UL = styled.ul((_) => ({
    display: 'inline-block',
    position: 'relative',
    margin: '0',
    listStyleType: 'none',
    textAlign: 'center',
    padding: 0
}));

const LI = styled.li((_) => ({
    display: 'inline-block',
    margin: '5px 1px 0 0',
    lineHeight: '1em',
    'a': {
        display: 'block',
        position: 'relative',
        borderColor: '#FFF',

import React, { Children } from 'react';
import PropTypes from 'prop-types';

import styled from '@emotion/styled';

const Container = styled.ul(({ theme }) => ({
  position: 'absolute',
  bottom: 0,
  right: 0,
  maxWidth: '100%',
  display: 'flex',
  listStyle: 'none',
  margin: 0,
  padding: 0,

  borderTop: theme.mainBorder,
  borderLeft: theme.mainBorder,
  background: theme.barFill,
  borderRadius: `${theme.mainBorderRadius}px 0 0 0`,
}));

export const ActionButton = styled.button(({ theme }) => ({