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
})
暂无评论