2

我有从服务器加载的样式，并且我有一些元素想将这些加载的样式应用到一个类中。在示例 1 中，这是因为我需要使用 css 选择器。在示例 2 中，这是因为我正在使用的第 3 方组件通过类获取其活动样式。

注意：我正在使用 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}
/>
4

0 回答 0