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

【问题标题】：Webpack/React: Convert css in stylesheet in to inline style on elementWebpack/React：将样式表中的 css 转换为元素上的内联样式
【发布时间】：2021-01-14 10:19:39
【问题描述】：

我创建了一个小型 react 应用程序，它使用了许多 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 模块能够做到这一点。有人对我如何实现这一目标有意见吗？我总是可以重写，但会尽量避免。

【问题讨论】：

我会说，从性能的角度来看，做这种内联是非常糟糕的选择，我宁愿将它们作为<style> 放入页面<head>
同意，但构建最终将成为电子邮件模板，因此需要在元素上内联样式，因为某些客户端会剥离样式标签

标签： css reactjs webpack styles inline

【解决方案1】：

试试这个：

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

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

【讨论】：

欢迎来到 StackOverflow，感谢您的意见，但这在这种情况下无济于事。这是在反应组件中内联样式的正确方法，但这不是我想要的。我正在寻找在 webpack 编译 css 之后内联应用的样式。