Styled-Components，如何动态生成css属性？

Question

给定两个动态属性：

1. 当前颜色
2. 剩余卡

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

使用 Styled 组件，如何动态设置 box-shadow 属性？其中，cardsRemaining 的数量指定了 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];

wherecurrentColor用于在每个 box-shadow 值中分配颜色。

所以如果cardsRemaining == 4 && currentColor == blue：

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 == Yellow：

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

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

谢谢

Answer 1

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