Package Exports
- styled-tools
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (styled-tools) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
styled-tools
Utilities for styled-components
Install
$ npm install --save styled-toolsUsage
import styled from 'styled-components'
import { get, ifProp } from 'styled-tools'
const Button = styled.button`
color: ${get('color', 'red')};
font-size: ${ifProp({ size: 'large' }, '20px', '14px')};
`
// renders with color: blue
<Button color="blue" />
// renders with color: red
<Button />
// renders with font-size: 20px
<Button size="large" />API
get
Returns the value of props[path] or defaultValue
Parameters
Examples
const Button = styled.button`
color: ${get('color', 'red')};
`Returns any
ifProp
Returns pass if prop is truthy. Otherwise returns fail
Parameters
Examples
// usage with styled-theme
import styled from 'styled-components'
import { ifProp } from 'styled-tools'
import { palette } from 'styled-theme'
const Button = styled.button`
background-color: ${ifProp('transparent', 'transparent', palette(0))};
color: ${ifProp(['transparent', 'accent'], palette('secondary', 0))};
font-size: ${ifProp({ size: 'large' }, '20px', ifProp({ size: 'medium' }, '16px', '12px'))};
`Returns any
License
MIT © Diego Haz