What is styled-tools?
The styled-tools npm package provides utility functions for use with styled-components, allowing for more dynamic and reusable styles in your React applications.
What are styled-tools's main functionalities?
theme
The `theme` function allows you to access theme properties defined in your styled-components theme object. This makes it easy to apply consistent styles across your application.
const Button = styled.button`
color: ${theme('colors.primary')};
`;
ifProp
The `ifProp` function allows you to conditionally apply styles based on the presence of a prop. This is useful for creating dynamic styles that change based on component props.
const Button = styled.button`
background: ${ifProp('primary', 'blue', 'gray')};
`;
prop
The `prop` function allows you to use component props to set CSS properties. This makes it easy to create highly customizable components.
const Box = styled.div`
padding: ${prop('padding', '10px')};
`;
switchProp
The `switchProp` function allows you to switch between different styles based on the value of a prop. This is useful for creating components with multiple variants.
const Button = styled.button`
background: ${switchProp('size', {
small: '10px',
medium: '20px',
large: '30px'
})};
`;
Other packages similar to styled-tools
polished
Polished is a lightweight toolset for writing styles in JavaScript. It provides a variety of utility functions for color manipulation, math, and other CSS-related tasks. Compared to styled-tools, polished offers a broader range of utilities but does not focus specifically on styled-components.
styled-system
Styled-system is a collection of utility functions for building design systems with React. It allows you to style components based on a theme and provides responsive style props. Styled-system is more focused on creating consistent design systems, whereas styled-tools provides more general utility functions for styled-components.
emotion
Emotion is a library designed for writing CSS styles with JavaScript. It offers a similar API to styled-components and includes utility functions for theming and dynamic styling. Emotion provides a more comprehensive solution for styling in React, including both styled-components and CSS-in-JS utilities.
styled-tools 💅
Utilities for styled-components 💅
Install
$ npm install --save styled-tools
Usage
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')};
`
<Button color="blue" />
<Button />
<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
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