如何通过将 SVG 作为道具传递来使用 React 样式组件来设置 SVG 样式？

Question

我有这个 SVG，是从 figma 导入的：

import React from 'react';
function CloseIcon() {
  return (
    <svg
      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;

然后 SVG 被导入到我的组件中，在屏幕上正确呈现为来自 Figma 的原始样式。但是当我使用带样式的组件对其进行样式设置时，不会应用任何样式。有什么问题？

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

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

const ClosingIcon = styled(CloseIcon)`
  cursor: pointer;
  position: absolute;
  top: 14px;
  right: 32px;
  /* width: 32px;
  height: 32px; */
  padding: 0;
  z-index: 10;
`;

Answer 1

您需要将 classname 属性传递给子组件，

function CloseIcon({ className }) {
  return (
    <svg
      className={className}  --> like this
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g clipPath="url(#clip0_5301_20199)">
        <path
          fillRule="evenodd"
          clipRule="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>
  );
}

参考：https://styled-components.com/docs/advanced#existing-css

如何通过将 SVG 作为道具传递来使用 React 样式组件来设置 SVG 样式？

How to style an SVG using React styled components by passing the SVG as prop?

svg

reactjs

styled-components