@styled-system/theme-get
DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/styled-system__theme-get package

5.1.2 • Public • Published

@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),
}))

Readme

Keywords

none

Package Sidebar

Install

npm i @styled-system/theme-get

Weekly Downloads

66,440

Version

5.1.2

License

MIT

Unpacked Size

3.88 kB

Total Files

7

Last publish

Collaborators

  • jxnblk