Applying multiple variants to a single box

Author: TerrellLinnellCreated Feb 18, 2020Updated Mar 28, 2023

Labelsquestion

I thought I saw somewhere that I should be able to apply multiple variants to a single box by listing them like so? Currently I only get the rounded border and if I flip them I only get the cursor change.

bash

export const Box = styled.div(
	background,
	space,
	color,
	layout,
	flexbox,
	border,
	fontSize,
	fontWeight,
	lineHeight,
	shadow,
	variant({
		variants: {
			rounded: {
				borderRadius: '10px',
			},
			clickable: {
				cursor: 'pointer',
			},
		},
	}),
);

<Box variants={['rounded', 'clickable']}>

Source: styled-system/styled-system

View original on GitHub View discussion on GitHub