Skip to content
Branch: master
Find file History
Latest commit 1767bf0 Jun 10, 2019
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
src Split up core package May 27, 2019
test Split up core package May 27, 2019
README.md Update packages/theme-get/README.md Jun 6, 2019
package.json v5.0.6 Jun 10, 2019

README.md

@styled-system/theme-get

The themeGet function is an existential getter function that can be used in any style declaration to get a value from your theme, with support for fallback values. This helps prevent errors from throwing when a theme value is missing, which can be helpful when unit testing styled-components.

npm i @styled-system/theme-get
themeGet(objectPath, fallbackValue)(props)

themeGet returns a function that accepts props as an argument (themeGet(objectPath)(props)), which when used in a tagged template literal should look like this:

import styled from 'styled-components'
import { themeGet } from '@styled-system/theme-get'

const Box = styled.div`
  border-radius: ${themeGet('radii.small', '4px')};
`

When used with object literal syntax, themeGet needs to be in a function call and have props passed to it:

import styled from 'styled-components'
import { themeGet } from '@styled-system/theme-get'

const Box = styled('div')(props => ({
  borderRadius: themeGet('radii.small', '4px')(props),
}))
You can’t perform that action at this time.