css - 将 React 内联样式转换为 CSS 规则

Question

有没有工具可以将 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

我想手动使用它，所以命令行或基于 Web 的更可取。

标签： cssreactjs

Answer 1

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

https://glitch.com/~convert-css-js

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