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

Uncaught (in promise) Error: ReactElement styleName property defines multiple module names ("nav-right fr").的解决方案

故事发生的背景:
使用react-css-modules来引入css(原先用的是css-modules,后来发现不好用),引入的方法如下:

import CSSModules from 'react-css-modules'
import styles from './less/nav.less'
@CSSModules(styles)
<ul styleName="nav-right fr">
      <li><a href="">反馈</a></li>
      <li><a href=""><i styleName="ic ic-bell"></i></a></li>
      <li><a href=""><i styleName="ic ic-thub"></i></a></li>
</ul>

运行后界面出不来,js报错。

Uncaught (in promise) Error: ReactElement styleName property defines multiple module names ("nav-right fr").

js报错

网上搜索了一下,问题出在react-css-modules的使用上。
找到react-css-modules的主页。

https://github.com/gajus/react-css-modules#allowmultiple
其中有这么一段话

allowMultiple

默认情况下,allowMultiple为false,只需要将其设为true就可以。
所以正确的写法:

{"allowMultiple":true}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容