CSS Variables in Styled Components

App.jsx

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

const GlobalStyle = createGlobalStyle`
  html {
    /* Maps all colors from the `theme` to CSS variables: */
    ${({ theme }) => Object.entries(theme.colors).map(([name, value]) => css`
      --${camelCaseToKebabCase(name)}: ${value};
    `)}
  }
`

const App = () => (
  <>
    <GlobalStyle>
    <RestOfTheApp />
  </>
)

Component.jsx

import styled from 'styled-components'

export const Component = styled.div`
  /* References a CSS variable: */
  color: var(--color-gray-light);
`