Custom CSS Props with Styled Components

Table.tsx

import * as React from 'react'
import ReactTable from 'react-table'
import { CSSCustomProperties, TableWrapper } from './TableWrapper'

interface Props {
	rowSize?: string | number
}

export class Table extends React.Component<Props> {
	static defaultProps = {
		rowSize: 24
	}
	render() {
		let { rowSize } = this.props

		return (
			<>
					<CSSCustomProperties rowSize={rowSize} {...this.props} />
					<TableWrapper>
						<ReactTable columns={...} showPagination={false} className="-highlight" />
					</TableWrapper>
				</>
		)
	}
}

TableWrapper.ts

import styled, { createGlobalStyle, } from 'styled-components'

export const CSSCustomProperties = createGlobalStyle`
:root {
	--dimension-spacing-1: 4px;
  
	--defaultLineHeight: 1.25rem;
	--gutter: 24px;
	--rowSize: ${props => `${props.rowSize}px`};
	--accumulatedGutter: calc(var(--gutter) * 11);
	--availableSpace: calc(var(--width) - var(--accumulatedGutter));
	--columnSize: calc(var(--availableSpace) / 12);

	--column-1:	var(--columnSize);
	--column-2:	calc(var(--columnSize) * 2);
	--column-3:	calc(var(--columnSize) * 3);

 }
`

export const TableWrapper = styled.div`
& .ReactTable {
		position: relative;
		display: flex;
		flex-direction: column;
		background: var(--tableColor, white);
		border: 0px solid rgba(0, 0, 0, 0);
		& * {
			box-sizing: border-box;
		}
  }
  ...
`