将一种样式应用于带有已设置样式的组件的组件数组

时间:2020-10-23 16:26:08

标签: reactjs styled-components

我有一些 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"]};
`;

1 个答案:

答案 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"]};
}
`;