How to use the frontity.styled.li function in frontity

const MenuList = styled.ul`
  position: relative;
  list-style: none;
  margin: 0;
  /* left: calc(50% - 50vw);
  width: 100vw; */
`;

const ToggleText = styled.span`
  margin-right: 1.6rem;
  * {
    fill: currentColor;
  }
`;

const MenuListItem = styled.li`
  position: relative;
  border-style: solid;
  border-width: 0.1rem 0 0 0;
  border-color: #dcd7ca;
  display: flex;
  flex-wrap: wrap;
  line-height: 1;
  justify-content: flex-start;
  margin: 0;
`;

const MenuLinkWrapper = styled.div`
  display: flex;
  justify-content: space-between;
  width: 100%;
`;

font-weight: 500;
  letter-spacing: -0.0277em;
  flex-wrap: wrap;
  justify-content: flex-end;
  list-style: none;
  margin: 0;

  @media (min-width: 1220px) {
    margin-top: -0.8rem;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: -2.5rem;
  }
`;

const MenuItem = styled.li`
  font-size: inherit;
  line-height: 1.25;
  position: relative;
  margin: 0.8rem 0 0 1.6rem !important;

  @media (min-width: 1220px) {
    margin: 0.8rem 0 0 2.5rem !important;
  }
`;

const MenuLink = styled(Link)`
  display: block;
  line-height: 1.2;
  text-decoration: none;

  &:hover,

flex-shrink: 0;
  margin-right: 1rem;
`;

const MetaText = styled.span`
  a {
    color: inherit;
    text-decoration: none;
  }

  :hover {
    text-decoration: underline;
  }
`;

const ListItem = styled.li`
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  letter-spacing: -0.016875em;
  margin: 1rem 0 0 2rem;
  max-width: calc(100% - 2rem);
  text-transform: capitalize;

  @media (min-width: 700px) {
    margin: 1.4rem 0 0 3rem;
    max-width: calc(100% - 3rem);
  }
`;

export default PostMetaItem;