javascript - 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

我找到了我的问题的解决方案并张贴在这里以供 future 的搜索者使用。

我做了这个简单的函数来将 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;
};