首頁猿問樣式反應組件（SVG）與樣式化組件

樣式反應組件（SVG）與樣式化組件

JavaScript

一只斗牛犬 2022-09-23 09:41:01

有沒有辦法按照這種樣式對導入到 react 中的 SVG 組件進行樣式設置：使用帶樣式的組件？我一直在將我的個人項目切換到帶樣式的組件，并且由于某種原因，樣式無法在組件上顯示。import { ReactComponent as Icon } from "./resources/somerandom.svg"這是我嘗試過的：import { ReactComponent as Icon } from "./resources/somerandom.svg"import styled from "styled-components"const IconWrapper = styled.svg` fill: white; width: 20px;`const RandomComponent = () => (<IconWrapper> <Icon/></IconWrapper>)我知道我可以直接將樣式傳遞給SVG組件，但我想要一個使用帶樣式組件的解決方案。如果這篇文章沒有多大意義，那可能是因為我起床的時間比我記得的要長。感謝所有的幫助。

查看完整描述

1 回答

紅糖糍粑

TA貢獻1815條經驗獲得超6個贊

給定 SVG：

</svg>

我們想要定位一些SVG屬性，有很多方法：

import { ReactComponent as Icon } from "./github.svg";

import styled from "styled-components";

// With wrapper, target the svg

const IconWrapper = styled.div`

svg {

width: 500px;

height: 200px;

fill: blue;

}

// Style the component (treated like styled.svg in this case)

const StyledIcon = styled(Icon)`

width: 500px;

height: 200px;

fill: palevioletred;

// With wrapper, target the generated className

const IconWrapperTargetClassname = styled.div`

${StyledIcon} {

fill: palegreen;

}

ReactDOM.render(

<React.StrictMode>

</IconWrapper>

</IconWrapperTargetClassname>

</>

</React.StrictMode>,

document.getElementById("root")

);

反對回復 2022-09-23

1 回答
0 關注
144 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

樣式反應組件 （SVG） 與樣式化組件

樣式反應組件 （SVG） 與樣式化組件

1 回答

添加回答

樣式反應組件（SVG）與樣式化組件

樣式反應組件（SVG）與樣式化組件