[Doc] How to access theme values

[Kikobeats]

Hey,

I'm seeing that is possible access to theming values, such as:

import { theme } from 'styled-system'
theme('color.white') // => '#fff'

how do that, for example, for array elements?

I'm trying different approach but looks it doesn't works

import { theme } from 'styled-system'
theme('breakpoints.1') // => nope?
theme('breakpoints[1]') // => nope?

[jxnblk]

The themeGet function is intended for use as an interpolation in styled-components, etc. Without styled-components the call should look like this:

const value = themeGet('colors.blue')(props)

With styled-components it looks like this:

const Box = styled.div`
  color: ${themeGet('colors.blue')};
`

It's mostly a shortcut to avoid props => _.get(props.theme, 'colors.blue') and also allows for fallback values as a second argument:

color: ${themeGet('colors.blue', '#07c')};

[xralphack]

const value = themeGet('colors.blue')(props)

what is this props?

I want to use theme value in component by myself

[nicolasletoublon]

Same thing here, I would like to access theme values outside of styled-components, and even if I call the themeGet('')(props) with this props, its doing nothing :/

[muhajirdev]

Hey guys, if you still face this problem. Make sure you use withTheme

import { themeGet } from 'styled-system'
import { withTheme } from 'styled-components'

const ChartContainer = props => {
  const { data, title, unit } = props
  const color = themeGet('colors.text')(props)
  console.log('color is ', color)
  return (
    <Card variant="primary" my={5} height={8}>
      <Heading fontSize={2} fontWeight="bold">
        {title}
      </Heading>
      <Chart data={transformData(data, title, unit)} color="#fff" />
    </Card>
  )
}

export default withTheme(ChartContainer)

It works for me :)

[jikkujose]

Surprised to find there is no easy way to get a theme variable without so much fuss!