樣式組件，如何動態生成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}
    `