样式组件中的 @for 循环

【问题标题】：@for loops in styled-components样式组件中的 @for 循环
【发布时间】：2019-03-12 18:50:14
【问题描述】：

我正在尝试在 styled-components 文档中找到一种方法来创建循环。例如，我可以在 styled-components 中实现这个scss 循环吗？

@for $i from 0 through 20 {
  #loadingCheckCircleSVG-#{$i} {
    animation: fill-to-white 5000ms;
    animation-delay: ($i - 1.5) * 1s;
    fill: white;
    opacity: 0;
  }
}

有可能吗？

【问题讨论】：

我相信 styled-components 主要是 js。因此，请使用 js for loop

标签： javascript reactjs styled-components

【解决方案1】：

我们目前不支持来自 scss 的迭代语法。但是，由于 styled-components 接受 JS 插值，您只需编写一个简单的 JS 函数来制作所需的 CSS 并将其放入。

import styled, { css } from "styled-components";

function createCSS() {
  let styles = '';

  for (let i = 0; i < 20; i += 1) {
     styles += `
       #loadingCheckCircleSVG-${i} {
         animation: fill-to-white 5000ms;
         animation-delay: ${i - 1.5}s;
         fill: white;
         opacity: 0;
       }
     `
  }

  return css`${styles}`;
}

const Thing = styled.div`
  ${createCSS()};
`

【讨论】：

如果我想传递道具怎么办：？？ ` ${props=> createCSS(props)}` 不起作用
如果您在样式内部进行插值，则需要使用 css 助手。