Combining variants and custom props

[sindresola]

Yo ✌️

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

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

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

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

<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?

[casesandberg]

I also ran into this when creating a custom prop for fill color on an SVG component. I created a custom prop for fill to hook it up to the colors theme obj. It works as expected when you pass in a color via the prop of that component, but it doesn't work when trying to define different fills as variants.

Seems to be the same issue as #810

[SnaiNeR]

If i understand you right, you can do it in next way,

const boxShapes = (props) => variant({
  variants: {
    square: {
      color: props.theme.colors.red
      bg: props.color
    }
  }
});

const Box = styled.div`
  ${(props) => boxShapes(props)} // pass all props here
  ...
  ${customProp}
`;