样式组件，如何动态生成CSS属性？

Question

给定两个动态属性：

const colors = ['blue', 'red', 'green', 'yellow', 'orange']

使用样式化组件，如何动态设置box-shadow属性？ 其中数字卡剩余数指定盒阴影值的数量。

例如，cardsRemaining == 2：

box-shadow:
    8px 0 0 0 colors[current+1],
    16px 0 0 0 colors[current+2];

例如，cardsRemaining == 4：

box-shadow:
    8px 0 0 0 colors[current+1],
    16px 0 0 0 colors[current+2],
    24px 0 0 0 colors[current+3],
    32px 0 0 0 colors[current+4];

并且使用currentColor在每个框阴影值中分配颜色。

因此，如果cardsRemaining == 4 && currentColor ==蓝色：

box-shadow:
    8px 0 0 0 red,
    16px 0 0 0 green,
    24px 0 0 0 yellow,
    32px 0 0 0 orange;

或者，如果cardsRemaining == 2 && currentColor ==黄色：

box-shadow:
    8px 0 0 0 orange,
    16px 0 0 0 blue;

您如何使用样式化组件来解决这样的问题？

谢谢

Answer 1

您可以编写一个函数，该函数将给定属性作为参数返回样式。 你去了：解决方案

Answer 2

在样式化的组件内部，可以访问道具。 因此，您可以执行以下操作-

export getBoxShadow = ({cardsRemaining, currentColor }) => logicHere

export const StyledComponent = styled.div`box-shadow: ${getBoxShadow};`

从@OwlyMoly编辑：如果只想传递颜色：

    const StyledComponent = styled.div`
     box-shadow: 8px 0 0 0 ${props => props.colorToBe}
    `