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 💅
Useful interpolated functions for styled-components 💅
Install
$ npm install --save styled-toolsUsage
Play with it on WebpackBin
import styled, { css } from 'styled-components'
import { prop, ifProp, switchProp } from 'styled-tools'
const Button = styled.button`
color: ${prop('color', 'red')};
font-size: ${ifProp({ size: 'large' }, '20px', '14px')};
background-color: ${switchProp('theme', {
dark: 'blue',
darker: 'mediumblue',
darkest: 'darkblue'
})};
`
// renders with color: blue
<Button color="blue" />
// renders with color: red
<Button />
// renders with font-size: 20px
<Button size="large" />
// renders with background-color: mediumblue
<Button theme="darker" />A more complex example:
const Button = styled.button`
color: ${prop('theme.colors.white', '#fff')};
font-size: ${ifProp({ size: 'large' }, prop('theme.sizes.lg', '20px'), prop('theme.sizes.md', '14px'))};
background-color: ${prop('theme.colors.black', '#000')};
${switchProp('kind', {
dark: css`
background-color: ${prop('theme.colors.blue', 'blue')};
border: 1px solid ${prop('theme.colors.blue', 'blue')};
`,
darker: css`
background-color: ${prop('theme.colors.mediumblue', 'mediumblue')};
border: 1px solid ${prop('theme.colors.mediumblue', 'mediumblue')};
`,
darkest: css`
background-color: ${prop('theme.colors.darkblue', 'darkblue')};
border: 1px solid ${prop('theme.colors.darkblue', 'darkblue')};
`,
})}
${ifProp('disabled', css`
background-color: ${prop('theme.colors.gray', '#999')};
border-color: ${prop('theme.colors.gray', '#999')};
pointer-events: none;
`)}
`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
switchProp
Switches on a given prop. Returns the value or function for a given prop value.
Parameters
Examples
import styled, { css } from 'styled-components'
import { switchProp } from 'styled-tools'
const Button = styled.button`
font-size: ${switchProp('size', {
small: prop('theme.sizes.sm', '12px'),
large: prop('theme.sizes.lg', '20px'),
default: prop('theme.sizes.md', '16px'),
})};
${switchProp('theme.kind', {
light: css`
color: LightBlue;
`,
dark: css`
color: DarkBlue;
`,
})}
`
<Button size="large" theme={{ kind: 'light' }} />Returns any
call
Calls a function passing properties values as arguments.
Parameters
Examples
// example with polished
import styled from 'styled-components'
import { darken } from 'polished'
import { call, prop } from 'styled-tools'
const Button = styled.button`
border-color: ${call(darken(0.5), prop('theme.primaryColor', 'blue'))};
`Returns any
Related
- styled-theme - Extensible theming system for styled-components
License
MIT © Diego Haz