How to use the linaria/react.styled.li function in linaria

//@flow

import {styled} from 'linaria/react'

export const TabHeader = styled.li`
  border-right: 1px solid #ddd;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  padding: 7px 15px;
  margin: 0;
  background-color: ${({isActive}) => (isActive ? 'white' : 'inherit')};
`

export const TabHeaderList = styled.ul`
  background: #f7f7f7;
  border-bottom: 1px solid #ddd;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;

const Header = styled.div`
  padding: 3px 5px;
  background: #f7f7f7;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
`

const Section = styled.section`
  padding: 5px;
`

const EmptySection = styled.section`
  padding: 15px;
`

const Item = styled.li`
  cursor: ${props => (Boolean(props.loc) ? 'pointer' : 'inherit')};
`

const mapper = item => {
  const loc = item?.defaultConfig?.loc
  const name =
    item?.compositeName?.fullName
    || item?.shortName
    || item.id
    || item.displayName
  const key = item.kind && item.id ? item.kind + item.id + name : name
  const onClick = () => {
    if (loc) codeSetCursor(loc)
  }
  return (

writing-mode: vertical-lr;
  }
`;

const List = styled.ul`
  margin: 0;
  list-style: none;
  white-space: nowrap;
  padding: 1.25rem;

  @media (max-width: 768px) {
    padding-right: 1.5rem;
  }
`;

const Item = styled.li`
  display: inline-block;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.05rem;

  @media (max-width: 768px) {
    font-size: 1.2rem;
  }

  &:after {
    display: inline;
    position: relative;
    bottom: 0.1em;
    padding: 0.8em;
    font-size: 0.8em;
    font-weight: 400;

//@flow

import React from 'react'
import {styled} from 'linaria/react'
import {LogsView} from '../logs/view'
import {createComponent} from 'effector-react'
import {createApi, createStore, Store} from 'effector'

const tab: Store<'console'> = createStore('console')
const api = createApi(tab, {
  showConsole: () => 'console',
})

const Tab = styled.li`
  border-right: 1px solid #ddd;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  padding: 7px 15px;
  margin: 0;
  background-color: ${({isActive}) => (isActive ? 'white' : 'inherit')};
  border-bottom: ${({isActive}) => (isActive ? '1px solid #fff' : 'none')};
  margin-bottom: ${({isActive}) => (isActive ? '-1px' : '0')};
`

const TabContent = styled.div`
  overflow: auto;
`

const TabView = createComponent(tab, ({}, tab) => (

//@flow

import React from 'react'
import {styled} from 'linaria/react'
import {createComponent} from 'effector-react'
import {createApi, createStore, Store} from 'effector'
import {LogsView} from '../logs/view'
import {TabHeaderList} from '../tabs/styled'

const tab: Store<'console'> = createStore('console')
const api = createApi(tab, {
  showConsole: () => 'console',
})

const Tab = styled.li`
  border-right: 1px solid #ddd;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  padding: 7px 15px;
  margin: 0;
  background-color: ${({isActive}) => (isActive ? 'white' : 'inherit')};
  border-bottom: ${({isActive}) => (isActive ? '1px solid #fff' : 'none')};
  margin-bottom: ${({isActive}) => (isActive ? '-1px' : '0')};
`

const TabContent = styled.div`
  overflow: auto;
`

const TabView = createComponent(tab, ({}, tab) => (