在 spfx webpart 中使用内联 css

【问题标题】：using inline css in spfx webpart在 spfx webpart 中使用内联 css
【发布时间】：2017-06-14 22:07:12
【问题描述】：

我正在尝试在 html 内容中使用内联 css，但它显示了您在下图中看到的错误；

如何在 spfx webpart 中使用内联 css？

【问题讨论】：

【解决方案1】：

<div className={`ms-Grid-col ms-u-md3`} style={{"border-color": "black"}}>
//Some Code
</div>

【讨论】：

【解决方案2】：

简单的方法如下，

【讨论】：

【解决方案3】：

这样做不是一个好习惯。你应该更好地使用 sass 文件并在那里定义你的样式。由于这不是 HTML，而是 JSX，因此您可以执行以下操作：

var style = {
      color: 'white',
      fontSize: 200
    };

return <div style={style}> Have a good and productive day! </div>;

但不建议这样做。代码片段不是我的，而是取自这篇帖子React.js inline style best practices

【讨论】：