#1930·styled-system

Combining variants and custom props

Author: sindresolaCreated Apr 21, 2021Updated Jun 13, 2022

Labelsquestion

Yo ✌️

I have had issues trying to use custom props inside tof a variant.

javascript

const customProp = system({
  rounded: {
    property: "borderRadius",
    scale: "radii"
  }
});

const boxShapes = variant({
  variants: {
    round: {
      rounded: "full",
      bg: "pink"
    },
    square: {
      rounded: "none",
      bg: "green"
    }
  }
});

const Box = styled.div`
  ${boxShapes}
  ${color}
  ${space}
  ${customProp}
`;

Using rounded inside variants does not work when setting variant on the Box

xml

<Box m="4" p="4" variant="round">
  Custom prop inside variant
</Box>

But setting the custom prop directly on the Box like this work.

xml

<Box bg="blue" m="4" p="4" variant="square" rounded="full">
  Custom prop on element
</Box>

Example project here: CodeSandbox

How can I combine custom props and variants?

Source: styled-system/styled-system

View original on GitHub View discussion on GitHub