Question

在反应项目中，最终用户可以使用工具生成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;
};

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

1 个答案: