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 💅, emotion, JSS and other CSS-in-JS libraries.
Install
$ npm install --save styled-toolsUsage
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
Table of Contents
prop
Returns the value of props[path] or defaultValue
Parameters
pathstringdefaultValueany
Examples
const Button = styled.button`
color: ${prop("color", "red")};
`;Returns PropsFn
theme
Same as prop, except that it returns props.theme[path] instead of
props[path].
Parameters
pathstringdefaultValueany
Examples
const Button = styled.button`
color: ${theme("button.color", "red")};
`;Returns PropsWithThemeFn
ifProp
Returns pass if prop is truthy. Otherwise returns fail
Parameters
test(Needle | Array<Needle> | Object)passany (optional, default"")failany (optional, default"")
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 PropsFn
ifNotProp
Returns pass if prop is falsy. Otherwise returns fail
Parameters
Examples
const Button = styled.button`
font-size: ${ifNotProp("large", "20px", "30px")};
`;Returns PropsFn
withProp
Calls a function passing properties values as arguments.
Parameters
Examples
// example with polished
import styled from "styled-components";
import { darken } from "polished";
import { withProp, prop } from "styled-tools";
const Button = styled.button`
border-color: ${withProp(prop("theme.primaryColor", "blue"), darken(0.5))};
font-size: ${withProp("theme.size", size => `${size + 1}px`)};
background: ${withProp(["foo", "bar"], (foo, bar) => `${foo}${bar}`)};
`;Returns PropsFn
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, prop } from "styled-tools";
const Button = styled.button`
font-size: ${switchProp(prop("size", "medium"), {
small: prop("theme.sizes.sm", "12px"),
medium: prop("theme.sizes.md", "16px"),
large: prop("theme.sizes.lg", "20px")
}};
${switchProp("theme.kind", {
light: css`
color: LightBlue;
`,
dark: css`
color: DarkBlue;
`
})}
`;
<Button size="large" theme={{ kind: "light" }} />Returns PropsFn
Types
Needle
License
MIT © Diego Haz