您已经将SuccessSVG提取到其自己的组件中。现在，您只需要通过props传递要动态的配置

const SuccessSvg = ({ cx,cy }) => {
    return (
        <svg viewBox="0 0 233.3 233.3" >
            <circle class="circle" cx={cx} cy={cy} r="116.65" />
            <path
                class="ok"
                d="M97.28,167.38l-33.7-33.7a6.34,6.34,1,9-9l29.21,29.21,76-76a6.34,9,9l-80.48,80.48A6.34,97.28,167.38Z"
                transform="translate(-8.51 -6.01)"
            />
        </svg>
    )
}

const Component = () =>{
    return(
        <SuccessSvg color='blue' />
    )
}

遗憾的是，您必须考虑这一折衷。通过将svg声明为独立组件，您可以编写更多代码并可以控制自定义。这样您就可以传递将在jsx结构中深入应用的道具

const CustomSVG = ({ svgProps,circleProps }) =>{
    return(
        <svg {...svgProps}>
            <circle {...circleProps} />
        </svg>
    )
}

这就是链接问题的OP将svg包装到组件中的原因，以便他可以将自定义className注入svg中。声明性组件很棒，但是您受到它们的API的限制。在您的情况下，我看不到太多选择，要么将结构抽象为自己的组件，要么使用嵌套的选择器。

如果您不想按照@Dupocas的建议使用组件，唯一的方法是设置SVG的样式：

// Example of CSS-in-JS,can be achieved with simple className.
const SVGContainer = styled.div`
  svg {
    path {
      fill: ${({ circleColor }) => circleColor};
    }
  }
`;

function SuccessIcon({ circleColor }) {
  return (
    <SVGContainer circleColor={circleColor}>
      <SuccessSVG />
    </SVGContainer>
  );
}

const App = () => {
  return <SuccessIcon circleColor="palevioletred" />;
};