Webpack/React：将样式表中的 css 转换为元素上的内联样式

Question

我创建了一个小型反应应用程序，它使用了许多 sass/css 样式表，这些样式表都导入到 app.scss 中

通常使用 webpack 编译所有内容。 新的需求开始发挥作用，需要将样式内联到元素本身。

当前设置

.element {
  position: absolute;
  width: 50%;
  top: 15px;
  background: red;
}

<div className="element">Hello World</div>

编译后我想要什么

<div style="position: absolute; width: 50%; top: 15px; background: red;">Hello World</div>

四处搜索并没有导致任何 webpack 模块能够做到这一点。 有没有人对我如何实现这一目标有意见？ 我总是可以重写，但会尽量避免它。

Answer 1

尝试这个：

<div style={{position: "absolute", width: "50%", top: "15px", background: "red"}}>Hello World</div>

基本上当你想传递内联样式时，你应该传递一个带有键值对的样式对象。