Question

我需要使用样式组件更改SVG的颜色。

import styled from "styled-component";
import {ifProp} from "styled-tools";
import arrowSVG from "./assets/arrow.svg";

const Arrow = styled(arrowSVG)`
   fill: ${ props => props.shouldFill ? red : white };
`;

// Then use it like this:
<Arrow shouldFill={false}>
<Arrow shouldFill>

但是，它不起作用。因为我做styled(arrowSVG)的时间，所有道具都会传递到arrow.svg，所以React会给出警告，例如：无法将shouldFill识别为有效的DOM属性。

如何在不创建新功能来处理条件检查的情况下克服这一问题？谢谢。

Answer 1

我怀疑您是否可以像在问题中提到的那样直接使用SVG图标。此外，这将取决于您如何导入SVG图标，就我而言，它是作为代码sandbox上的图标“ src”导入的。最好将Icon创建为React组件，然后将fill作为道具传递给它，或者使用其中的现有SVG图标库之一。

我已经为创建SVG图标的组件创建了一个代码沙箱，该组件作为可以接受您的用例的填充接受道具。

enter link description here

Answer 2

这可能不是最佳解决方案，但它解决了我的类似问题。添加包装器样式的div。

import ArrowSVG from "./assets/arrow.svg";

const ArrowFrame = styled.div`
   svg {
      fill: ${ props => props.shouldFill ? red : white };
   }
`;

<ArrowFrame shouldFill={false}><ArrowSVG /></ArrowFrame />
<ArrowFrame shouldFill><ArrowSVG /></ArrowFrame />

具有样式化组件的条件渲染SVG

2 个答案: