动态创建和使用CSS模块?

时间:2017-02-22 13:27:09

标签: javascript css reactjs css-modules

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

0 个答案:

没有答案