结合变体和自定义道具

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}
`;
在设置 `variant` 为 Box 时,在变体中使用 `rounded` 并不起作用。