ts-cases-for-styled-components.tsx

import React from 'react'
import styled from 'styled-components'

const Base = ({ value = '' }) => <div>{value}</div>

type CSSProperties = {
  'grid-gap': number | string,
}

type ObjectFrom<TProperty extends string, TResult> = {
  [K in TProperty]?: TResult
}

export const value = <TCSSProperty extends keyof CSSProperties, TProperty extends string>(
  cssProp: TCSSProperty,
  componentProp: TProperty
) => (props: ObjectFrom<TProperty, CSSProperties[TCSSProperty]>) => {
  const value = props[componentProp]
  if (typeof value === 'undefined') return ''
  return `${cssProp}: ${value};`
}

const Grid = styled(Base)`
  ${props => props.value}
  ${value('grid-gap', 'gap')}
`

const App = () => (
  <Grid
    value={"1"}
    gap={1} // number | string | undefined
  />
)