我有从服务器加载的样式,我有一些元素,我想将这些加载的样式应用于类。在示例1中,因为我需要使用css选择器。在示例2中,因为我使用的第三方组件通过类设置了活动样式。
注意:我使用的是ReactJS和CSS模块。
如何动态创建CSS模块类并将其应用于组件?
示例1
renderSvg = () => {
const { imageUrl, stylePreferences } = this.props
const { primaryColor } = stylePreferences
// using svg4everybody's polyfill to deal with CORS constraints
// I'd want a css rule that would essentially apply
// .svgClass path { fill: primaryColor }
// would be great if I could dynamically create a css class and attach it to svg
return (
<svg fill={primaryColor}>
<use xlinkHref={`${imageUrl}#Layer_1`} />
</svg>
)
}
示例2
const { stylePreferences } = this.props
const { borderTopColor } = stylePreferences
// stylePreferences are editable and saved/loaded from the server
// I'd like the active class to include these loaded styles
<ScrollLink
onActiveClass={classes.foobar}
/>