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

【问题标题】：Styled-Components, how to dynamically generate css properties?Styled-Components，如何动态生成css属性？
【发布时间】：2018-06-22 22:05:22
【问题描述】：

给定两个动态属性：

还有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];

其中currentColor 用于分配每个 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;

你会如何使用 styled-components 解决这样的问题？

谢谢

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案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}
    `

【讨论】：