更改 svg 动态样式组件的填充颜色答案

【问题标题】：Change fill collor for svg dynamically styled-components更改 svg 动态样式组件的填充颜色
【发布时间】：2022-01-20 23:38:25
【问题描述】：

我正在尝试通过样式组件中的 css 来定位我的 svg 的填充属性，但没有成功。

这是我的svg

<svg width="65" height="19" viewBox="0 0 65 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 6.8667V13.7334H6.83075H13.6615V6.8667V0H6.83075H0V6.8667ZM34.2257 6.8667V13.7334H41.0564H47.8872V6.8667V0H41.0564H34.2257V6.8667ZM9.47623 4.36809L9.4552 4.92533L8.50249 4.94546L7.54978 4.96542V7.44408V9.92256H6.83075H6.11173V7.44408V4.96542L5.15902 4.94546L4.20631 4.92533L4.18527 4.36809L4.16424 3.81084H6.83075H9.49726L9.47623 4.36809ZM41.9414 3.91815C45.0675 4.73227 45.0675 9.00113 41.9414 9.81525C41.6333 9.8956 41.1073 9.92256 39.8549 9.92256H38.1803V6.8667V3.81084H39.8549C41.1073 3.81084 41.6333 3.8378 41.9414 3.91815ZM17.1128 11.1809V18.0476H23.9436H30.7743V11.1809V4.31416H23.9436H17.1128V11.1809ZM51.3385 11.1809V18.0476H58.1693H65V11.1809V4.31416H58.1693H51.3385V11.1809ZM39.6184 6.8667V8.77212H40.4722C42.1033 8.77212 42.7981 8.20301 42.7981 6.8667C42.7981 5.53039 42.1033 4.96128 40.4722 4.96128H39.6184V6.8667ZM24.8519 8.15304C26.4692 8.58374 27.4607 10.08 27.1943 11.6878C26.6101 15.2135 21.1343 15.1689 20.6341 11.6344C20.3085 9.33458 22.4991 7.52659 24.8519 8.15304ZM59.0776 8.15304C60.6948 8.58374 61.6864 10.08 61.42 11.6878C60.8358 15.2135 55.36 15.1689 54.8598 11.6344C54.5342 9.33458 56.7247 7.52659 59.0776 8.15304ZM23.3477 9.37772C22.5318 9.5972 22.0475 10.3193 22.0862 11.2585C22.1877 13.7233 25.7723 13.6477 25.7723 11.1809C25.7723 9.86019 24.652 9.02701 23.3477 9.37772ZM57.5734 9.37772C56.7574 9.5972 56.2732 10.3193 56.3118 11.2585C56.4134 13.7233 59.9979 13.6477 59.9979 11.1809C59.9979 9.86019 58.8777 9.02701 57.5734 9.37772Z" fill="#1F1F2A"/>
</svg>

这就是我的使用方式：

export const Logo = styled.svg`
  background-image: url('./logo.svg');
  background-repeat: no-repeat;
  background-size: contain;
  height: 2em;
  & path {
    fill: #a4a4bc;
  }
  @media ${devices.desktop}{
    height: 3.4em;
  }

`

这就是我导入和使用它的方式

import {
  Logo
} from '../styles/pages/home'

<LogoWrapper>
  <Logo />
  <legend>{formatter(homeContent[locale].title)}</legend>
</LogoWrapper>

我尝试了其他变体来更改填充，但都没有奏效。有什么想法吗？

【问题讨论】：

你的 CSS 编译成什么，因为它看起来应该可以工作（假设 Logo 被编译成合理的东西，比如 svg）：demo。
它在浏览器树中显示为这样<svg class="home__Logo-sc-1upzqwk-1 inTCXq"></svg>
如何从“../styles/pages/home”导出 svg？
作为 Logo 组件。 @DavidThomas 给了我一个 Ideia，我使用了一个名为 react-inlinesvg 的包来设置组件的样式，并且成功了！

标签： javascript css reactjs svg styled-components

【解决方案1】：

您应该从样式中删除背景属性，例如 background-image。因为 svg 是一个向量，除非特殊情况，不需要重新设置图片。

您可以扩展 LogoWrapper 组件来设置 svg 图片的样式，如下所示：

export const StyledLogoWrapper = styled(LogoWrapper)`
  svg {
    height: 2em;
    & path {
      fill: #a4a4bc;
    }
    @media ${devices.desktop}{
      height: 3.4em;
    }
  }
`

【讨论】：

【解决方案2】：

使用 react-inlinesvg 我设法让它工作

import SVG from 'react-inlinesvg'

export const Logo = styled(SVG)`
  & path {
    fill: #a4a4bc;
  }
  @media ${devices.desktop}{
    height: 3.4em;
  }

`

【讨论】：