使用共享相同颜色的样式组件创建的 svg 微调器

Question

我正在尝试使用 styled-components 并尝试创建一个 svg 圆形微调器组件。一切都很好，除非我尝试在同一页面中多次使用该组件，然后每个组件都使用与上一个组件相同的 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);

我在这里错过了什么？

这是 codesandbox 演示 link：https://codesandbox.io/s/pyo8kox787

Answer 1

我看到的问题是您创建的 keyframes 是常规 css 而不是使用 styled-components keyframes 助手。
来自样式组件 docs:

CSS animations with @keyframes aren't scoped to a single component but you still don't want them to be global to avoid name collisions. This is why we export a keyframes helper which will generate a unique instance that you can use throughout your app

据我所知，关键帧是为最后一个呈现的组件创建的，因为它们不在组件范围内。修复方法是像这样使用 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"};
    }
`;

并修复了您的沙盒 here。
请记住，您需要为那里的每个关键帧修复它。

使用共享相同颜色的样式组件创建的 svg 微调器

svg spinner created with styled components sharing same color

svg

reactjs

styled-components