Циклы @for в styleled-компонентах

Question

Я пытаюсь найти метод в документации 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;
  }
}

Возможно ли это?

Answer 1

В настоящее время у нас нет поддержки итерационных синтаксисов из scss.Однако, так как styled-component принимает 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()};
`