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

Question

我正在玩Styled-components并试图创建一个svg circle 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);

我在这里错过了什么？

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

Answer 1

我看到的问题是你已经创建了你的keyframes作为常规css而不是样式组件keyframes助手。 从样式组件docs：

使用@keyframes的CSS动画不限于单个组件，但您仍然不希望它们是全局的以避免名称冲突。这就是为什么我们导出一个关键帧帮助器，它将生成一个可以在整个应用程序中使用的唯一实例

至于我能说的是，关键帧是为最后渲染的组件创建的，因为它们没有作用于组件。该修复使用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。 请记住，您需要为每个关键帧修复它。