How to use the styled-system.theme function in styled-system

style: props => ({
      fontFamily: theme('fonts.0', 'sans-serif')(props),
      lineHeight: theme('lineHeight', 1.5)(props),
      color: theme('textColor')(props)
    }),
    system: []

import React from 'react'
import styled from 'styled-components'
import { NavLink } from 'react-router-dom'
import { space, color, theme } from 'styled-system'

const BaseNavItem = styled.a`
  display: block;
  text-decoration: none;
  font-size: ${theme('fontSizes.1')}px;
  border-radius: ${theme('radius')};
  ${space} ${color} &:hover {
    box-shadow: inset 0 0 0 9999px #cdf;
  }
  &.active {
    opacity: 1;
    background-color: #07f;
    color: #fff;
  }
`
BaseNavItem.defaultProps = {
  pl: 3,
  pr: 2,
  py: 2,
  color: 'inherit'
}

alignSelf,
} from 'styled-system'
import {gridArea, justifySelf} from '../utils/styled'
import {theme} from 'styled-system'
import {withDynamicTag} from './DynamicTag'

const ArticleHeading = styled.h2.attrs({
  f: props => (props.f !== undefined ? props.f : [4, 3]),
  mb: props => (props.mb !== undefined ? props.mb : 3),
})`
  color: black;
  font-weight: 700;
  font-style: italic;
  text-align: center;

  @media (min-width: ${theme('breakpoints.0')}) {
    color: ${theme('grays.1')};
    text-align: left;
  }

  ${space}
  ${width}
  ${fontSize}
  ${color}
  ${textAlign}
  ${justifyContent}
  ${alignSelf}
  ${gridArea}
  ${justifySelf}
`
ArticleHeading.displayName = 'ArticleHeading'
export default withDynamicTag(ArticleHeading)

alignSelf,
} from 'styled-system'
import {gridArea, justifySelf} from '../utils/styled'
import {theme} from 'styled-system'
import {withDynamicTag} from './DynamicTag'

const SectionHeading = styled.h4.attrs({
  color: props => (props.color !== undefined ? props.color : 'grays.1'),
  f: props => (props.f !== undefined ? props.f : [3, 2]),
  mb: props => (props.mb !== undefined ? props.mb : 3),
})`
  font-weight: 700;

  ${props => !props.align && 'text-align: center'};

  @media (min-width: ${theme('breakpoints.0')}) {
    text-align: ${props => props.align || 'left'};
  }

  ${space}
  ${width}
  ${fontSize}
  ${color}
  ${textAlign}
  ${justifyContent}
  ${alignSelf}
  ${gridArea}
  ${justifySelf}
`

SectionHeading.displayName = 'SectionHeading'
export default withDynamicTag(SectionHeading)

${space} & th {
    text-align: left;
    background-color: #f6f8fa;
    padding: 0 16px;
  }

  & td:first-child {
    font-family: 'Roboto Mono', Menlo, monospace;
    font-size: 16px;
    min-width: 150px;
    color: ${theme('colors.blue')};
  }

  & td {
    font-size: 16px;
    color: ${theme('colors.text')};
    vertical-align: middle;
    padding: 0 16px !important;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: ${theme('colors.borderGray')};
  }

  & th,
  & td {
    height: 72px;
    line-height: inherit;
  }
`
Table.defaultProps = {
  my: 3
}

& .rc-slider-handle {
    position: absolute;
    cursor: pointer;
    cursor: grab;
    border-radius: 9999px;
    border: solid 4px currentcolor;
    background-color: #fff;
    touch-action: pan-x;

    &:hover {
    }
    &:active {
    }
    &:focus {
      box-shadow: 0 0 0 2px ${getTheme('colors.alphablue')};
    }
  }

  &.rc-slider-disabled {
    color: ${getTheme('colors.borderGray')};
    .rc-slider-track {
    }
    .rc-slider-handle {
      box-shadow: none;
      cursor: default;
    }
  }
`

Slider.defaultProps = {
  allowCross: false,

const ClickableIcon = styled(Icon)`
  pointer-events: none;
`

const SelectBase = styled.select`
  appearance: none;
  display: block;
  width: 100%;
  font-family: inherit;
  color: inherit;
  background-color: transparent;
  border-radius: ${system.theme('radius')};
  border-width: 1px;
  border-style: solid;
  border-color: ${system.theme('colors.borderGray')};
  ${space} ${fontSize} &:focus {
    outline: none;
    border-color: ${system.theme('colors.blue')};
    box-shadow: 0 0 0 1px ${system.theme('colors.blue')};
  }
`
SelectBase.defaultProps = {
  theme,
  fontSize: 1,
  m: 0,
  pl: 12,
  pr: 32,
  py: 14
}

const Select = styled(props => (

touch-action: none;

  ${space} ${color} & .rc-slider-rail, & .rc-slider-track {
    height: 8px;
  }
  & .rc-slider-handle {
    width: 32px;
    height: 32px;
    margin-left: -16px;
    margin-top: -12px;
  }

  & .rc-slider-rail {
    position: absolute;
    width: 100%;
    background-color: ${getTheme('colors.lightGray')};
    border-radius: 9999px;
  }

  & .rc-slider-track {
    position: absolute;
    left: 0;
    border-radius: 9999px;
    background-color: currentcolor;
  }

  & .rc-slider-handle {
    position: absolute;
    cursor: pointer;
    cursor: grab;
    border-radius: 9999px;
    border: solid 4px currentcolor;

border-radius: 9999px;
    border: solid 4px currentcolor;
    background-color: #fff;
    touch-action: pan-x;

    &:hover {
    }
    &:active {
    }
    &:focus {
      box-shadow: 0 0 0 2px ${getTheme('colors.alphablue')};
    }
  }

  &.rc-slider-disabled {
    color: ${getTheme('colors.borderGray')};
    .rc-slider-track {
    }
    .rc-slider-handle {
      box-shadow: none;
      cursor: default;
    }
  }
`

Slider.defaultProps = {
  allowCross: false,
  color: 'blue',
  theme
}

Slider.propTypes = {

import React from 'react'
import styled from 'styled-components'
import { NavLink } from 'react-router-dom'
import { space, color, theme } from 'styled-system'

const BaseNavItem = styled.a`
  display: block;
  text-decoration: none;
  font-size: ${theme('fontSizes.1')}px;
  border-radius: ${theme('radius')};
  ${space} ${color} &:hover {
    box-shadow: inset 0 0 0 9999px #cdf;
  }
  &.active {
    opacity: 1;
    background-color: #07f;
    color: #fff;
  }
`
BaseNavItem.defaultProps = {
  pl: 3,
  pr: 2,
  py: 2,
  color: 'inherit'
}