How to use the styled-components.tr function in styled-components

/**
 *
 * TableRowEmpty
 *
 */

import styled from 'styled-components';

const TableRowEmpty = styled.tr`
  width: 100%;
  height: 108px;
  background: #ffffff;
  td {
    height: 106px;
    line-height: 106px;
    font-size: 1.3rem;
    font-weight: 400;
    color: #333740;
    text-align: center;
    border-collapse: collapse;
    border-top: 1px solid #f1f1f2 !important;
  }
`;

export default TableRowEmpty;

table-layout: fixed;
`
export const StyledTh = styled.th`
  text-align: left;
  height: 30px;
  vertical-align: top;
  padding: 5px;
  width: ${props => props.width || 'auto'};
`
export const StyledTd = styled.td`
  padding: 5px;
  width: ${props => props.width || 'auto'};
  text-overflow: ellipsis;
  overflow: hidden;
`
export const StyledHeaderRow = styled.tr`
  border-top: ${props => props.theme.inFrameBorder};
  border-bottom: ${props => props.theme.inFrameBorder};
`

const HeaderRow = styled.tr`
      &:hover {
        background: none !important;
      }
    `;

    const BodyCell = styled.td`
      padding: 5px 2px !important;
      border-bottom: none !important;
      font-size: 13px;
      color: #000;
      line-height: 20px;
    `;

    const BodyRow = styled.tr`
      &:hover {
        background: none !important;
      }
      &:first-child {
        & > td {
          padding-top: 10px !important;
        }
      }
      &:last-child {
        & > td {
          padding-bottom: 10px !important;
        }
      }
    `;

    const components = {

import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'

const ScrollContainer = styled.div`
  overflow-x: auto;
  &:not(:last-child) {
    margin-bottom: ${th('space.3')};
  }
`

const Table = styled.table`
  border-collapse: collapse;
  border-spacing: 0;
`

export const Tr = styled.tr`
  text-align: center;
  &:hover {
    background-color: aliceblue;
  }
`

export const Th = styled.th`
  background-color: ${th('colorSecondary')};
  font-size: 12px;
  padding: ${th('space.1')};
  border: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
`

export const Td = styled.td`
  font-size: 12px;
  padding: ${th('space.1')};

import React from 'react';
import styled, { css } from 'styled-components';

const Container = styled.tr`
  margin: 1rem 0;
  font-size: 1.125rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);

  ${props => props.disabled && css`opacity: 0.5;`};
`;

const Feature = styled.td`
  text-align: right;
  padding: 1rem 0;
  padding-right: 2rem;
`;

const Value = styled.td`
  text-align: center;

padding: 10px;
  overflow: hidden;
  font-size: 1.1em;
  line-height: 50px;
  text-align: center;
  vertical-align: middle;
`
const Table = styled.table`
  table-layout: fixed;
  width: 100%;
`
const BaseTable = Table.extend`
  line-height: 30px;
`

const Tr = styled.tr`
  border-bottom: 1px solid #eee;
`

const Td = styled.td`
  cursor: pointer;
`
const Time = Td.extend`
  width: 24%;
`
const UserName = Td.extend`
  width: 12%;
`
const Title = Td.extend`
  width: 64%;
`

{row.label}
        
      );
      break;
  }

  return (
    
      {row.time}
      {tdList}
    
  );
};

const Wrapper = styled.tr`
  td {
    background-color: ${colors.yuki};
    border-bottom: 10px solid ${colors.primary};
    vertical-align: top;

    &:first-child {
      padding: 10px;
      box-sizing: border-box;
      background-color: ${colors.secondary};
      color: ${colors.yuki};
    }
  }
`;

const ContentSlotWrapper = styled.div`
  width: 100%;

color: #6a6d70;
  > tr {
    cursor: auto;
  }
`;

export const TableBody = styled.tbody``;

export const TableHeadCell = styled.th`
  text-align: left;
  padding: 16px 20px;
  border: none;
  font-weight: 400;
`;

export const TableRow = styled.tr`
  transition: background-color 125ms ease-in;
`;

export const TableCell = styled.td`
  text-align: left;
  padding: 16px 20px;
`;

export const LeftAlignedHeader = styled.th`
  text-align: left;
`;

export const StyledCode = styled.code``;

export const TableWrapper = styled.section``;

import styled from 'styled-components'

const StyledTableLine = styled.tr`
  height: ${({ theme }) => theme.components.table.spaces.lineHeight};

  border-bottom: ${({ theme }) => theme.components.table.borders.borderWidth} solid
    ${({ theme }) => theme.components.table.colors.border};

  td:first-child {
    padding-left: ${({ theme }) => theme.components.table.spaces.firstChildLeftSpacing};
  }

  ${({ isHoverable, theme }) =>
    isHoverable
      ? `&:hover {
    background: ${theme.components.table.colors.backgroundHover};
  }`
      : ``}