svg spinner создан со стилизованными компонентами, имеющими одинаковый цвет

Question

Я играю с styled-components и пытаюсь создать компонент Spin Spinner. Все замечательно, за исключением случаев, когда я пытаюсь использовать компонент несколько раз на одной странице, тогда каждый компонент использует один и тот же strokeColor из последнего. Другие реквизиты strokeWidth работают нормально, хотя.

import React from "react";
import ReactDOM from "react-dom";

import Spinner from "./Spinner";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <Spinner strokeColor="#000000" strokeWidth={2} />
      <Spinner strokeColor="red" strokeWidth={1} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Что мне здесь не хватает?

Вот демонстрационная ссылка для кодов и ящиков: https://codesandbox.io/s/pyo8kox787

Answer 1

Проблема, которую я вижу, состоит в том, что вы создали keyframes как обычный css, а не с помощью styleled-elements keyframes helper.
Из стилевых компонентов документы :

CSS-анимации с @keyframes не ограничиваются одним компонентом, но Вы все еще не хотите, чтобы они были глобальными, чтобы избежать конфликтов имен. это Вот почему мы экспортируем помощник ключевых кадров, который будет генерировать уникальный экземпляр, который вы можете использовать в своем приложении

Что касается того, что я могу сказать, ключевые кадры создаются для последнего визуализируемого компонента, поскольку они не ограничены компонентом. Исправление использует хелпер keyframes следующим образом:

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

const colorKeyFrames = keyframes`
0% {
      stroke: ${props => props.color || "#ffffff"};
    }
    40% {
      stroke: ${props => props.color || "#ffffff"};
    }
    66% {
      stroke: ${props => props.color || "#ffffff"};
    }
    80%,
    90% {
      stroke: ${props => props.color || "#ffffff"};
    }
`;

И исправление для вашей песочницы здесь .
Имейте в виду, вам нужно будет исправить это для каждого ключевого кадра, который у вас есть.