我有一些 SVG 图标,我希望它们全部具有相同样式。 我如何将一种样式应用于所有样式?
import {ReactComponent as clearSky} from "./weather_fullmoon.svg";
import {ReactComponent as WeatherCloud} from "./weather_cloud.svg";
import {ReactComponent as VariableSun} from "./weather_variable_sun.svg";
import {ReactComponent as ShowerRain} from "./weather_rain.svg";
import styled from "styled-components"
const Icon = styled(clearSky)`
width: 3.2rem;
height: 3.2rem;
fill: ${ props => props.theme["LightText"]};
`;
答案 0 :(得分:1)
这是一种可行的方法。将图像包装在一个空的div包装器中,并对每个图像应用单独的类.svgs
。
function SvgImages() {
return
<SvgImagesWrapper>
<clearsky className="svgs"/>
<WeatherCloud className="svgs"/>
<VariableSun className="svgs"/>
<ShowerRain className="svgs"/>
<SvgImagesWrapper/>;
}
const SvgImagesWrapper = styled.div`
.svgs {
width: 3.2rem;
height: 3.2rem;
fill: ${ props => props.theme["LightText"]};
}
`;