Takes a styled-system and returns the same system with prefixed pseudo props.
yarn add pseudo-styled-system
// pseudoSystems.ts
import { pseudoizeSystem, PseudoizedSystem } from 'pseudo-styled-system'
import { BorderProps, color, ColorProps, system } from 'styled-system'
const pseudoColor = pseudoizeSystem(color, ':hover');
type PseudoColorProps = PseudoizedSystem<ColorProps, ':hover'>;
const pseudoBorder = pseudoizeSystem(system({ borderColor: true }), [':hover', ':focus']);
type PseudoBorderProps = PseudoizedSystem<BorderProps, ':hover' | ':focus'>;
// styled-components component
const Component = styled.div(
compose(color, pseudoColor, pseudoBorder)
)
<Component hoverColor="colorFromTheme" focusBorderColor="red" />
- The resulting props are prefixed with the pseudo selector. e.g.
:hover = hover
:first-child = firstChild
- You need to compose the system yourself. Does not return a composed system, but a new system without the original props.
- You should only add styling pseudo props (start with
:
) and not elements (start with::
)