如何在pugjs中添加多个单词的样式属性

Question

我正在尝试添加style attributes using pugsj，我想不出如何添加像line-height这样的样式而不让我的内裤抱怨。

我有这个pug模板(不工作)

 Div(
  class="CoolAid"
  style={line-height:'40px', background-color: 'red'}
 )
    = childrenArray[0]

请注意，当我使用"background-color": 'red'时，eslint仍然会报错。

yarn lint:es
 yarn run v1.6.0
$ eslint ./config ./src
Cannot read property 'split' of undefined
TypeError: Cannot read property 'split' of undefined
at TaggedTemplateExpression (/home/circleci/github/node_modules/eslint-plugin- 
react-pug/lib/rules/no-broken-template.js:33:38)
at listeners.(anonymous function).forEach.listener (/home/circleci/github/node_modules/eslint/lib/util/safe-emitter.js:47:58)
at Array.forEach (<anonymous>)
at Object.emit (/home/circleci/github/node_modules/eslint/lib/util/safe-emitter.js:47:38)
at NodeEventGenerator.applySelector (/home/circleci/github/node_modules/eslint/lib/util/node-event-generator.js:251:26)
at NodeEventGenerator.applySelectors (/home/circleci/github/node_modules/eslint/lib/util/node-event-generator.js:280:22)
at NodeEventGenerator.enterNode (/home/circleci/github/node_modules/eslint/lib/util/node-event-generator.js:294:14)
at CodePathAnalyzer.enterNode (/home/circleci/github/node_modules/eslint/lib/code-path-analysis/code-path-analyzer.js:608:23)
at Traverser.enter [as _enter] (/home/circleci/github/node_modules/eslint/lib/linter.js:865:28)
at Traverser._traverse (/home/circleci/github/node_modules/eslint/lib/util/traverser.js:132:14)

错误命令失败，退出代码为% 1。

[eslint] Pug can't parse this template (react-pug/no-broken-template)

这些是我使用的与pug/eslint相关的包

"eslint-plugin-react": "^7.4.0",
"eslint-plugin-react-pug": "^0.3.0",
"babel-plugin-transform-react-pug": "^5.0.0",
"eslint": "^4.19.1",

Answer 1

下面是实现该功能的方法：

 .CoolAid(style="{line-height:'40px', background-color: 'red'}")= childrenArray[0]

这将生成以下标记：

<div class="CoolAid" style="{line-height:'40px', background-color: 'red'}">
  {{childrenArray[0]}}
</div>