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

Question

使用SCSS，我可以像这样创建CSS魔术：

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

我现在正致力于使用样式化组件的React App。样式组件是否允许上述某种方式？

Answer 1

您可以剪切中间人并在渲染过程中进行计算，或者您可以将索引传递给返回将生成您的样式的对象的内容。

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}

的attr传递您的组件

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