styled-tools 💅
Useful interpolated functions for styled-components 💅, emotion 👩🎤, JSS and other CSS-in-JS libraries.
Install
npm:
npm i styled-tools
Yarn:
yarn add styled-tools
Usage
import styled css from "styled-components";import prop ifProp switchProp from "styled-tools"; const Button = styledbutton` color: ; font-size: ; background-color: ;`; // renders with color: blue<Button ="blue" /> // renders with color: red<Button /> // renders with font-size: 20px<Button ="large" /> // renders with background-color: mediumblue<Button ="darker" />
A more complex example:
const Button = styledbutton` color: ; font-size: ; background-color: ; `;
API
Table of Contents
prop
Returns the value of props[path]
or defaultValue
Parameters
path
stringdefaultValue
any
Examples
;; const Button = styledbutton` color: ;`;
Returns PropsFn
theme
Same as prop
, except that it returns props.theme[path]
instead of
props[path]
.
Parameters
path
stringdefaultValue
any
Examples
;; const Button = styledbutton` color: ;`;
palette
Returns props.theme.palette[key || props.palette][tone || props.tone || 0]
or defaultValue
.
Parameters
Examples
;; const theme = palette: primary: '#1976d2' '#2196f3' '#71bcf7' '#c2e2fb' secondary: '#c2185b' '#e91e63' '#f06292' '#f8bbd0' ; const Button = styledbutton` color: ; // props.theme.palette[props.palette][1] color: ; // props.theme.palette.primary[1] color: ; // props.theme.palette.primary[props.tone || 0] color: ; // props.theme.palette.primary[3] color: ; // props.theme.palette.primary[3] color: ; // props.theme.palette.primary[0] color: ; // props.theme.palette.primary[0] || red`; <ThemeProvider theme=theme> <Button palette="secondary" /></ThemeProvider>
ifProp
Returns pass
if prop is truthy. Otherwise returns fail
Parameters
test
(Needle | Array<Needle> | Object)pass
any (optional, default""
)fail
any (optional, default""
)
Examples
;; const Button = styledbutton` background-color: ; color: ; font-size: ;`;
Returns PropsFn
ifNotProp
Returns pass
if prop is falsy. Otherwise returns fail
Parameters
Examples
;; const Button = styledbutton` font-size: ;`;
Returns PropsFn
withProp
Calls a function passing properties values as arguments.
Parameters
Examples
// example with polished;;; const Button = styledbutton` border-color: ; font-size: ; background: ;`;
Returns PropsFn
switchProp
Switches on a given prop. Returns the value or function for a given prop value. Third parameter is default value.
Parameters
Examples
;; const Button = styledbutton` font-size: ; `; <Button size="large" theme= kind: "light" />
Returns PropsFn
Types
Needle
A Needle is used to map the props to a value. This can either be done with
a path string "theme.size.sm"
or with a function
(props) => props.theme.size.sm
(these two examples are equivalent).
All of styled-tools can be used as Needles making it possible to do
composition between functions. ie ifProp(theme("dark"), "black", "white")
License
MIT © Diego Haz