要在 JSX 中的元素上添加内联样式，您必须使用此对象语法，例如
<div style={{
fontSize: 16,
marginBottom: "1rem"
}}>
Content
</div>对于我们这些习惯了 CSS 语法的用户来说，这可能看起来有点奇怪，因为它是 font-size（而不是 fontSize），margin-bottom（而不是 marginBottom），以及分号（而不是逗号）。
这不是 JSX（或 React 或其他）的怪异之处——这只是 JavaScript 中样式的本质。如果您想从任何其他 JavaScript 设置 font-size，您必须执行以下操作
div.style.fontSize = "16px";我说的是，但其他 API确实希望您使用 CSS 语法，例如
window.getComputedStyle(document.body)
.getPropertyValue("font-size");还有很多 CSS-in-JS 库，它们要么要求要么可以选择支持以这种对象格式设置样式。我甚至听说，对于那些支持 CSS 格式（通过模板文字）和对象格式（例如 Emotion）的库，有些人更喜欢对象语法而不是 CSS 语法，因为它在周围的 JavaScript 中感觉更自在，并且在执行诸如逻辑或注入变量之类的事情时，它会更简洁。
无论如何，这篇文章的真正原因是我偶然发现的这个小网站，它将 CSS 格式转换为对象格式。 CSS2JS
如果您要转换一大块样式，这绝对很方便。
在多年的编码之后，我得出的结论是我希望尽可能地将所有原始 HTML、CSS 和 JS 都掌握在我的指尖。它以冗长为代价提供了最大的控制。
几年前，我读到的 JSX 的第一个“好处”是它“更干净、更简单地编写”（从记忆中概括），即比普通 HTML 编写的代码更少。
他们没有考虑到在这样做的过程中会使 CSS 变得多么混乱吗？或者说，当时的 CSS-in-JS 范围如此有限，以至于他们根本不在乎吗？
似乎无论你认为你的系统多么聪明或巧妙，总会有代价。
有趣的是，自定义属性（如 –foo-bar）没有以任何方式通过该工具转换。我不确定在对象语法中对自定义属性的期望是什么。
我预计它会不正确地处理行高，而且我猜对了 :(
1 作为“1”
1px 作为 1（数字）
谢谢！您知道用于“js > CSS”的类似工具吗？
我想问一下，在 JS 框架的情况下，使用内联样式为整个应用程序设置样式是否可以？我的意思是，它会影响性能吗？