将 React 内联样式转换为 CSS 规则答案

【问题标题】：Convert React inline styles to CSS rules将 React 内联样式转换为 CSS 规则
【发布时间】：2018-06-09 10:15:08
【问题描述】：

是否有工具可以将 React 内联样式描述转换为 CSS 规则？

输入示例：

{
    minHeight: 200,
    position: 'relative',
    flexGrow: 1,
    flexShrink: 1,
    display: 'flex',
    flexDirection: 'column',
}

示例输出：

{
    min-height: 200px;
    position: relative;
    flex-grow: 1;
    flex-shrink: 1;
    display: flex;
    flex-flow: column;
}

换句话说，我想要一个与此完全相反的工具：https://github.com/raphamorim/native-css

我想手动使用它，所以命令行或基于网络的更好。

【问题讨论】：

标签： css reactjs

【解决方案1】：

是的，有一个工具可以做到这一点！

如果您将示例输入粘贴到 JS 端（必须在括号中），您将获得您指定的 CSS 输出（减去最后的分号）。

【讨论】：

【解决方案2】：

你试过这个“JSS的命令行工具”https://github.com/cssinjs/cli

【讨论】：

【解决方案3】：

是否有一个工具，可以将 React 内联样式描述转换为 CSS 规则？

有一个工具，是的。它是正则表达式（或RegEx）。

如果要转换以下内容：

这是每次相同的正则表达式操作。

模式匹配是：

/([a-z])([A-Z])/

即。一个小写字母后跟一个大写字母，分别捕获。

替换为：

$1-\L$2

即。

【讨论】：

嗨鲁宁！感谢你的回答。我喜欢你的简单方法，但它并不适合所有情况。例如，flexDirection 应转换为 flex-flow，而不是 flex-direction。我想人们需要从 React 源代码中获取所有此类案例的列表，以制定完整的解决方案。
@sesm - flex-flow 和 flex-direction 是不同的 CSS 规则。 flex-flow 是同时设置 flex-direction 和 flex-wrap 的简写（因为它们是同时进行的）。 React 通过flexFlow、flexDirection 和flexWrap 支持所有这三个。 developer.mozilla.org/en-US/docs/Web/CSS/flex-flow
@cchamberlain 谢谢你的评论，我不知道这个。这实际上使正则表达式方法可行。
NP！前几天我试图找到一个可以做到这一点的工具。同意正则表达式可能是最好的选择。