React组件中的CSS动画从具有不同动画的同一动画继承背景颜色

如何解决React组件中的CSS动画从具有不同动画的同一动画继承背景颜色

我已经在react中生成了一个组件，该组件的工作方式类似于Google日历中的“卡片”以及其他额外功能，带有会议名称，时间，被邀请者等。此卡片的热点可以是2种不同的颜色，从中心到外部逐渐增长的动画。我正在传递道具的颜色（包括css中的关键帧），但是由于某种原因，当两个热点颜色在同一容器中在一起时，一个会从另一个继承该颜色，如下所示：

这是我的Hotspot组件：

import React,{ memo } from 'react';
import PropTypes from 'prop-types';
import { MainContainer } from './styles';

function HotSpot({ color }) {
return (
    <MainContainer color={color}>
        <div className="item">
            <div className="item-inner">
                <a href="#" className="sonar" />
            </div>
        </div>
    </MainContainer>
);
}

   HotSpot.propTypes = {
   color: PropTypes.string,};

   export default memo(HotSpot);

以及CSS /样式化组件：

/* eslint-disable eqeqeq */
import styled from 'styled-components';

export const MainContainer = styled.div`
margin-left: 12px;
/*------------------------------------------------*\
Mixins
\*------------------------------------------------*/
/*------------------------------------------------*\
Sonar
\*------------------------------------------------*/
   @-webkit-keyframes sonar {
   from {
  box-shadow: 0 0 0 0
         ${props => props.color},0 0 4px 2px rgba(0,0.25);
}
to {
  box-shadow: 0 0 0 10px rgba(255,147,223,0),0.25);
}
}
  @keyframes sonar {
    from {
       box-shadow: 0 0 0 0
       ${props => props.color},0.25);
   }
   to {
    box-shadow: 0 0 0 10px rgba(255,0.25);
  }
 }
 .sonar {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: ${props => props.color};
  border: ${props => props.color};
  border: 2px solid ${props => props.color};
  -webkit-animation: sonar 800ms ease-out infinite;
  animation: sonar 800ms ease-out infinite;
}

/*------------------------------------------------*\
Uninteresting stuff
\*------------------------------------------------*/
*,*:before,*:after {
  box-sizing: border-box;
 }

.wrapper {
width: 850px;
margin: 20px auto;
}
.item-inner {
 display: table-cell;
 vertical-align: middle;
 text-align: center;
}
.item-inner > a {
 text-decoration: none;
 display: inline-block;
 }
 `;

如果我从红色检查类.sonar，则动画具有绿色的颜色，如下所示：