带样式的组件可以像 SCSS 一样处理计算吗？

Question

有了 SCSS，我可以像这样创造 CSS 魔法：

@for $i from 1 through $total-items {
  li:nth-child(#{$i}) {
    animation-delay: .25s * $i;
  }
}

我现在正在开发一个使用样式化组件的 React 应用程序。样式组件是否以某种方式允许上述内容？

Answer 1

您可以去掉中间人并在渲染期间进行计算，或者您可以将索引传递给 returns 将生成您的样式的对象。

totalItems.map((item, index) => {
   <li style={animationDelay: `${.25 * index}s`}>{item.name}</li>
})

否则你可以创建样式并传入索引来创建样式对象

const style = (index) => {
  return {
    animationDelay: `${.25 * index}s`
  }
}

但是如果您正在寻找样式化的组件方式将你的组件传递到这里，属性为 index={the index of the item}

const StyledLink = styled(component here)`
    animationDelay: ${props => props.index};
`;

Can styled components handle computations like SCSS?