时间戳

首页 > 解决方案 > 如果我将颜色道具传递给 svg 组件，那么 svg 的颜色在 React 中不会改变

reactjs - 如果我将颜色道具传递给 svg 组件，那么 svg 的颜色在 React 中不会改变

问题描述

我有添加新的 svg 组件，它的代码如下所示：

import * as React from 'react';

function SvgAddnew(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg width="1em" height="1em" viewBox="0 0 14 14" {...props}>
      <defs>
        <clipPath id="addnew_svg__a">
          <path d="M0 0h14v14H0z" />
        </clipPath>
      </defs>
      <g
        data-name="\u0421\u0433\u0440\u0443\u043F\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C 1379"
        fill="none"
        stroke="#fff"
        strokeLinecap="round"
        strokeWidth={1.7}
        clipPath="url(#addnew_svg__a)"
      >
        <path data-name="\u041B\u0438\u043D\u0438\u044F 147" d="M7 2v10" />
        <path data-name="\u041B\u0438\u043D\u0438\u044F 148" d="M12 7H2" />
      </g>
    </svg>
  );
}

export default SvgAddnew;

我像这样使用该组件：<SvgAddnew width={12} height={12} onClick={onClick} color="#C4C4C4" />但颜色保持白色而不是#C4C4C4

标签： reactjscolorsbackground-color

解决方案

尝试这个：

stroke={props.color || "#fff"}

推荐阅读