我希望動態更改我在容器中用作背景影像屬性的 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,");
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;
uj5u.com熱心網友回復：
我不知道為什么它不適合你，它適合我。你用的是JS還是TS？我也可以看到錯誤訊息嗎？
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/486829.html