[英]Styled-Components, how to dynamically generate css properties?
Given two dynamic properties: 给定两个动态属性:
And const colors = ['blue', 'red', 'green', 'yellow', 'orange']
const colors = ['blue', 'red', 'green', 'yellow', 'orange']
With Styled components, how can I dynamically set the box-shadow property? 使用样式化组件,如何动态设置box-shadow属性? Where the number cardsRemaining assigns the number of box-shadow values.
其中数字卡剩余数指定盒阴影值的数量。
For example, cardsRemaining == 2: 例如,cardsRemaining == 2:
box-shadow:
8px 0 0 0 colors[current+1],
16px 0 0 0 colors[current+2];
For example, cardsRemaining == 4: 例如,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];
And where currentColor
is used to assign the color in each box-shadow value. 并且使用
currentColor
在每个框阴影值中分配颜色。
So if cardsRemaining == 4 && currentColor == blue: 因此,如果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;
Or, if cardsRemaining == 2 && currentColor == yellow: 或者,如果cardsRemaining == 2 && currentColor ==黄色:
box-shadow:
8px 0 0 0 orange,
16px 0 0 0 blue;
How would you approach a problem like this with styled-components? 您如何使用样式化组件来解决这样的问题?
Thank you 谢谢
Inside styled components, it is possible to access the props. 在样式化的组件内部,可以访问道具。 Therefore, you can do something like below -
因此,您可以执行以下操作-
export getBoxShadow = ({cardsRemaining, currentColor }) => logicHere
export const StyledComponent = styled.div`box-shadow: ${getBoxShadow};`
Edit from @OwlyMoly: If you just want to pass the color: 从@OwlyMoly编辑:如果只想传递颜色:
const StyledComponent = styled.div`
box-shadow: 8px 0 0 0 ${props => props.colorToBe}
`
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.