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

我创建了一个小型react应用程序，它使用了大量的sass/css样式表，所有这些样式表都导入到app.scss中

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

当前设置

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

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

.element{
位置：绝对位置；
宽度：50%；
顶部：15px；
背景：红色；
}
你好，世界

编译后我想要什么

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

你好，世界

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

试试这个：

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

你好，世界

---

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

我想说，从性能的角度来看，这样的内联是一个非常糟糕的选择，我宁愿把它们作为

放到

页面中，但这个构建最终会成为电子邮件模板，因此，样式需要内联到元素上，因为一些客户机的strip style标记将进入StackOverflow，感谢您的输入，但这在这种情况下没有帮助。这是在react组件中内联样式的正确方法，但这不是我想要的。我正在寻找样式应用内联后，网页已编译css。