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
Play with it on WebpackBin
import styled from 'styled-components'
import { prop, ifProp } from 'styled-tools'
const Button = styled.button`
color: ${prop('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
prop
Returns the value of props[path] or defaultValue
Parameters
Examples
const Button = styled.button`
color: ${prop('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
Related
- styled-theme - Extensible theming system for styled-components
License
MIT © Diego Haz