React JS将CSS-in-JS转换为CSS字符串

Question

在react项目中，最终用户可以使用工具生成CSS。

我找到了如何生成JS对象并将其传递给style={}属性，但是我希望将生成的JS对象转换为CSS字符串，这样我就可以保存它并在其他地方使用它。

我想将JSObject转换为CSS：

JSObject样例-输入

JSObject: {
  lineHeight: 1,
  fontSize: 15,
  padding: 0,
  margin: 0,
  msBoxShadow: '0 0 1px 1px #000',
  MozBoxShadow: '0 0 1px 1px #000',
  OBoxShadow: '0 0 1px 1px #000',
  WebkitBoxShadow: '0 0 1px 1px #000',
  boxShadow: '0 0 1px 1px #000'
}

期望CSS示例输出

.cssClass{
    line-height: 1;
    font-size: 15px;
    padding: 0px;
    margin: 0px;
    box-shadow: rgb(0, 0, 0) 0px 0px 1px 1px;
}

Answer 1

我为我的问题找到了一个解决方案，并在这里张贴给未来的搜索者。

我使用这个简单的函数将JS对象转换为CSS字符串：

export const JSToCSS = (JS) => {
    let cssString = "";
    for (let objectKey in JS) {
        cssString += objectKey.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`) + ": " + JS[objectKey] + ";\n";
    }

    return cssString;
};