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

// Copyright © VNG Realisatie 2020
// Licensed under the EUPL
//

import { node, oneOf } from 'prop-types'
import styled from 'styled-components'

const HeadCell = styled.th`
  display: table-cell;
  padding: 12px 16px 12px 0;

  font-size: 12px;
  line-height: 20px;
  font-weight: 600;
  color: #a3aabf;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;

  text-align: ${(p) => p.align};
`

HeadCell.propTypes = {

import { connect } from 'react-redux';
import styled, { css } from 'styled-components';
import TableNav from './TableNav';
import TextInput from '../TextInput';
import { getUrlsList } from '../../actions';

const Tr = styled.tr`
  display: flex;
  align-items: center;

  thead & {
    border-bottom: 1px solid #ddd !important;
  }
`;

const Th = styled.th`
  display: flex;
  align-items: center;

  ${({ flex }) =>
    flex &&
    css`
      flex: ${`${flex} ${flex}`} 0;
    `};
`;

const Divider = styled.div`
  margin: 0 16px 0 24px;
  width: 1px;
  height: 20px;
  background-color: #ccc;

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

const styles = css`
  text-align: left;
  padding: 0.75em;
`

const Th = styled.th`${styles}`
const Td = styled.td`${styles}`

const TableCell = ({ heading, children, ...props }) => {
  return React.createElement(heading ? Th : Td, props, children)
}

TableCell.propTypes = {
  heading: PropTypes.bool,
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node
  ])
}

export default TableCell

import styled from 'styled-components';
import PropTypes from 'prop-types';

const TH = styled.th`
  padding: ${(props) => props.theme.px(2)};
  text-align: ${(props) => props.textAlign ? props.textAlign : ''};
`;

TH.propTypes = {
  textAlign: PropTypes.oneOf(['left', 'center', 'right', 'justify']),
};

TH.defaultProps = {
  textAlign: 'left',
};

export default TH;

const Wrapper = styled.div`
  @media only screen and (max-width: ${breakpoints.mobile}px) {
    overflow-x: scroll;
  }
`;

const Table = styled.table`
  width: 100%;
  border-bottom: 1px solid #EEE;
`;

const THEAD = styled.thead`
`;

const TH = styled.th`
  text-align: left;
  padding: 10px;
  border-bottom: 1px solid #EEE;
`;

const TBODY = styled.tbody`
`;

const TR = styled.tr`
  text-align: left;
`;

const TD = styled.td`
  padding: 5px 0;
  vertical-align: center;
  ${(props) => props.alignRight && 'text-align: right;'}

font-size: 18px;
  margin: 20px 0 16px;
  color: ${props => props.theme.colors.darkGray};
`;

export const TableRow = styled.tr`
  box-sizing: border-box;
`;

export const TableTd = styled.td`
  border: 1px solid ${props => props.theme.colors.gray};
  height: 60px;
  padding: 0 20px;
`;

export const TableTh = styled.th`
  color: ${props => props.theme.colors.darkGray};
  background-color: ${props => props.theme.colors.grayLight};
  border: 1px solid ${props => props.theme.colors.gray};
  height: 50px;
  font-weight: 700;
`;

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

import Feature from './Feature';

import Title from '../Title';

const Container = styled.div`
  padding: 1rem 0;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
`;

const CenteredHeader = styled.th`
  font-size: 1.25rem;
  font-weight: 400;
  text-align: center;
  padding: 1rem 0;

  ${props => props.supporter && css`background-color: rgba(0, 0, 0, 0.3);`};
`;

export default () => (
  
    <title>Lifted Limits</title>
    <table style="{{">
      <thead>
        <tr>
          <th>
          Free</th></tr></thead></table>

`;

interface DatepickerIconWrapperProps {
  needMargin?: boolean;
}

export const DatepickerTable = styled.table`
  width: 100%;
  max-width: 100%;
`;

export const Td = styled.td`
  padding: 0;
`;

export const Th = styled.th`
  padding: 0;
`;

export const HoverContent = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: ${({ biggerSize }) => (!biggerSize ? '35px' : 'auto')};
  height: ${({ biggerSize }) => (!biggerSize ? '35px' : '50px')};
  border-radius: 2px;
  transition: background 0.3s ease;
  background-color: transparent;
  line-height: 22px;
  ${({ currentActiveDate, index }) =>
    currentActiveDate && currentActiveDate === index
      ? `

propType: 'string|number|array',
        required: false,
        description: '',
      };
    });
  }

  return { componentProps, componentStyles };
};

const Table = styled.table`
  margin-top: 15px;
  width: 100%;
`;

const Th = styled.th`
  border-bottom: 1px solid #ccc;
  text-align: left;
  text-transform: uppercase;
`;

const Red = styled.span`
  color: red;
`;

const SubTitle = styled.h4`
  margin: 0;
  padding: 5px 0 0;
`;

const Text = styled.p`
  margin: 0;

*
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see .
 */

import styled from 'styled-components'

export const StyledTable = styled.table`
  width: 100%;
  margin-bottom: 0;
`
export const StyledBodyTr = styled.tr`
  background-color: ${props => props.theme.secondaryBackground};
  color: ${props => props.theme.secondaryText};
`
export const StyledTh = styled.th`
  text-align: left;
  height: 39px;
  font-weight: bold;
  padding: 10px 16px 10px 0;
  line-height: 39px;
  border-bottom: ${props => props.theme.inFrameBorder};
`
export const StyledTd = styled.td`
  border-bottom: ${props => props.theme.inFrameBorder};
  vertical-align: top;
  line-height: 26px;
  padding: 10px 16px 10px 0;
`

export const StyledJsonPre = styled.pre`
  background-color: ${props => props.theme.preBackground};