react-css-module一个styleName写入多个样式的解决方案。

今天在修改老项目代码时发现一个报错：

• Uncaught Error: ReactElement styleName property defines multiple module names ("content show-anim").

原始代码如下：

import CssModules from 'react-css-modules'
function Dialog(props) {
    //…… 项目代码
return (
    <div styleName="content show-anim">
      <div styleName="overflow-box">
        //……
      </div>
    </div>
  )
}
export default CssModules(Dialog, require('./dialog.styl'))

问题原因：

react-css-modules默认不支持同时传入两个styleName。

默认情况下，allowMultiple属性值为false，需要将其设为true。

解决办法：

新增传入参数

{
  allowMultiple: true
}

如：

import CssModules from 'react-css-modules'
function Dialog(props) {
    //…… 项目代码
return (
    <div styleName="content show-anim">
      <div styleName="overflow-box">
        //……
      </div>
    </div>
  )
}
export default CssModules(Dialog, require('./dialog.styl'), {
  allowMultiple: true
})