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

我想手动使用它，因此最好使用命令行或基于网络。

Answer 1

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

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

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