Javascript 动态创建和使用CSS模块？

我有从服务器加载的样式，我有一些元素，我想将这些加载的样式应用到一个类中。在示例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>
    )
  }

renderSvg=（）=>{
const{imageUrl，stylePreferences}=this.props
const{primaryColor}=stylePreferences
//使用SVG4Everyone的多边形填充处理CORS约束
//我想要一个基本上适用的css规则
//.svgClass路径{fill:primaryColor}
//如果我可以动态创建一个css类并将其附加到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}
/>

const{stylePreferences}=this.props
const{borderTopColor}=stylePreferences
//stylePreferences可编辑并从服务器保存/加载
//我希望活动类包含这些加载的样式