React中如何通过props传递SVG并用styled-components设置样式？

问题原因 #

styled-components 对自定义组件添加样式的核心逻辑是：自动生成唯一的className属性，传递给被包裹的自定义组件。你当前的CloseIcon组件没有接收外部传入的className参数，也没有将该className挂载到内部的svg标签上，导致生成的样式类没有绑定到实际渲染的DOM节点上，因此样式完全不生效。

解决方案 #

方案1：改造CloseIcon组件适配styled-components规则（推荐） #

直接修改CloseIcon组件，把接收的className挂载到svg根标签即可，修改后代码如下：

import React from 'react';
// 接收props中的className
function CloseIcon({ className }) {
  return (
    <svg
      // 把外部传入的className挂载到svg标签
      className={className}
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g clip-path="url(#clip0_5301_20199)">
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M19.8539 4.85394C20.0491 4.65868 20.0491 4.3421 19.8539 4.14683C19.6586 3.95157 19.342 3.95157 19.1468 4.14683L12.0007 11.2929L4.85372 4.14634C4.65845 3.95108 4.34187 3.95109 4.14661 4.14636C3.95136 4.34162 3.95136 4.65821 4.14663 4.85346L11.2936 12L4.14688 19.1467C3.95162 19.342 3.95162 19.6586 4.14688 19.8538C4.34214 20.0491 4.65873 20.0491 4.85399 19.8538L12.0007 12.7071L19.1467 19.8529C19.342 20.0481 19.6586 20.0481 19.8539 19.8528C20.0491 19.6576 20.0491 19.341 19.8538 19.1457L12.7078 12L19.8539 4.85394Z"
          fill="#00A989"
        />
      </g>
      <defs>
        <clipPath id="clip0_5301_20199">
          <rect width="24" height="24" fill="white" />
        </clipPath>
      </defs>
    </svg>
  );
}

export default CloseIcon;

修改完成后你现有业务代码里的ClosingIcon样式会自动生效，无需额外改动。

方案2：外层包裹容器（不想修改原有Icon组件时可选） #

如果不想改动原有CloseIcon组件的代码，也可以在外层套一个styled生成的容器，把样式写在容器上：

import CloseIcon from '../../../Icons/CloseIcon';
import styled from 'styled-components';

<ClosingIconWrapper
  aria-label="Close Modal"
  onClick={() => setShowModal((prev) => !prev)}
>
  <CloseIcon />
</ClosingIconWrapper>

const ClosingIconWrapper = styled.div`
  cursor: pointer;
  position: absolute;
  top: 14px;
  padding: 0;
  right: 32px;
  z-index: 10;
`;

这种方案下定位、层级、点击事件这类样式可以正常生效，仅适合临时使用，如果需要修改图标本身的宽高、填充色等样式，还是推荐使用方案1改造组件更灵活。

内容的提问来源于stack exchange，提问作者user14749773