Reactjs - 小道具を使用しているときに SVG で塗りつぶしが機能しないのはなぜですか?

SVG が赤になることを期待していますが、色 #D8D8D8 からまったく変化していません。 SVG に塗りつぶしが表示されており、これをパラメータに変換すれば使用できますが、CSS 経由でホバーを設定できるように React プロパティを使用して塗りつぶしを設定したいと思います。

SVG コード (Sketch エクスポートで取得したもの):

<svg width="57px" height="33px" viewBox="0 0 57 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Rectangle</title>
    <g id="Design" stroke="none" stroke-width="1" fill-rule="evenodd">
        <g id="Mobile-Copy-6" transform="translate(-196.000000, -69.000000)" fill="#D8D8D8">
            <rect id="Rectangle" x="196" y="69" width="57" height="33"></rect>
        </g>
    </g>
</svg>

私の反応コード:

import { ReactComponent as Logo } from "../../assets/rect.svg";

export const Example = () => {
  return (
    <div>
      <Logo fill="#C94141" />
    </div>
  );
};

typescript テンプレートで create-react-app を使用しました。ロゴはタイプとして識別されます。 React.FunctionComponent

1

<g> から fill 属性を削除します。要素。

2020 年 9 月 4 日 17:20

@ccprog ああ、うまくいきました!これが私が探していた答えです、ありがとう。

2020 年 9 月 4 日 17:27

動的に保ちたいプロパティを渡すコンポーネントとしてロゴを作成する必要があります。次のようなコンポーネントを作成してみてください。

export default ({ fill = '#D8D8D8' }) => (
    <svg width="57px" height="33px" viewBox="0 0 57 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <title>Rectangle</title>
        <g id="Design" stroke="none" stroke-width="1" fill-rule="evenodd">
            <g id="Mobile-Copy-6" transform="translate(-196.000000, -69.000000)" fill={fill}>
                <rect id="Rectangle" x="196" y="69" width="57" height="33"></rect>
            </g>
        </g>
    </svg>
);

その後、このコンポーネントを次のように使用します。

import Logo from "../../components/logo.js";
export const Example = () => {
    return (
        <div>
            <Logo fill="#C94141" />
        </div>
    );
};

1

提案してくれてありがとう :) 質問をもっと明確にするべきでした。 CSS 経由でプロパティを設定したかったので、残念ながらこのソリューションではそれが実現できませんでした。私の答えは @ccprog からのコメントの中にありました

2020 年 9 月 4 日 17:30