React - 尝试将 SVG 填充颜色作为道具传递，同时使用 svg 作为背景图像中的数据属性？

Question

我希望动态更改我在容器中用作背景图像属性的 svg 图案的填充颜色。我通过使用数据 uri 并直接将 SVG 代码作为样式组件中的值注入来实现这一点。目前它不会识别道具，图案就会消失。当我将填充颜色作为静态值时，这会起作用。是我写的吗？

这里是一些代码-

import React, { useState } from "react";
import styled from "styled-components";
import './App.css';

const Container = styled.div`
   height: 50vh;
   width: 100%;
   background-color: ${props => props.bg};
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='${props => props.color}' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
   background-size: cover;
`;


function App() {
   const [color, setColorChosen] = useState("green");
   const [bgChosen, setbgChosen] = useState("yellow");
   
  return (
     <>
         <Container bg={bgChosen} color={color}>
            
         </Container>
      </>
  );
}
export default App;

Answer 1

我不确定为什么它对你不起作用，但它对我有用。你用的是 JS 还是 TS？我也可以看到错误消息吗？

React - 尝试将 SVG 填充颜色作为道具传递，同时使用 svg 作为背景图像中的数据属性？

React - Trying to pass SVG fill color as a prop while using svg as data in background image property?

svg

background-image

data-uri

reactjs

React - 尝试将 SVG 填充颜色作为道具传递，同时使用 svg 作为背景图像中的数据 属性？

React - Trying to pass SVG fill color as a prop while using svg as data in background image property?

svg

background-image

data-uri

reactjs

React - 尝试将 SVG 填充颜色作为道具传递，同时使用 svg 作为背景图像中的数据属性？