如何将嵌套的 javascript object 转换为 CSS ZBC4150D023D32593136DB671D6Z1 的内联字符串？

Question

我有一个 javascript object 包含 CSS ZBC4150D023D3255136ZDB671D61AC93F2 的描述。

这个 object 来自第三方 API，所以我无法修改 object。

我想将 output 和 object 解析为一个字符串。

该字符串需要可用作我的 HTML 头部的内联 styles。

我需要能够将 map “基础”和“无效”自定义 class 名称。 这些可以作为变量提供。

无效的 > 颜色需要映射到边框颜色。 基本上它来自 object 作为“颜色”，但我需要使用它作为边框颜色。

我已经尝试过嵌套循环，并且一直非常努力地试图找出一个优雅的解决方案来解决这个问题。

请，如果您需要更多详细信息，请问我，我会尽力回答以帮助澄清。

JavaScript Object 我收到：

{
    style: {
        base: {
            color: '#46a0ba',
            '::placeholder': {
                color: '#000'
            }
        },
        invalid: {
            color: 'yellow'
        }
    },
}

我需要这个 output 作为单行字符串：

（我把它放在多行上，以便在这里更容易阅读）

.baseClass { color: #46a0ba; }
.baseClass::placeholder {color: #000}
.invalidClass { border: 1px solid yellow; }

请参阅 CodePen，了解我目前所处的位置：

https://codepen.io/fylzero/pen/gOOvdVp

Answer 1

我将 object 数据分为属性，将 go 分为主要规则和需要单独规则的嵌套内容。 对第二部分使用递归以及像map()和join()这样的数组函数，我们得到：

 const inputStyle = { base: { color: '#46a0ba', padding: '0.5em', 'font-size': '14pt', '::placeholder': { color: '#000' }, ':hover': { color: 'red' } }, invalid: { color: 'yellow' } }; function rules(className, obj) { const allProps = Object.entries(obj); const directProps = allProps.filter(([key, value]) => typeof value == 'string'); const pseudoProps = allProps.filter(([key, value]) => typeof value == 'object'); const directStyle = `.${className} { ${directProps.map(([key, value]) => `${key}: ${value};`).join(' ')} }`; const pseudoStyle = pseudoProps.map(([key, value]) => rules(className + key, value)).join(' '); return [directStyle, pseudoStyle].join(' '); } function appendStyle(baseName, invalidName, styleObj) { const styleElement = document.createElement("style"); styleElement.textContent = [rules(baseName, styleObj.base), `.${invalidName} { border: 1px solid ${styleObj.invalid.color}; }`].join(' '); document.head.append(styleElement); } appendStyle("baseClass", "invalidClass", inputStyle);

 body { background-color: #eee; }

 <input class="baseClass" placeholder="placeholder"> <input class="baseClass invalidClass" value="hello">