如何在 javascript 中将 object 转换为有效的 css styles？

Question

我有一个 object，需要将其转换为 css，例如：

     const options = {
            style: {
                base: {
                    background: 'red',
                    ':hover': {
                        background: 'green',
                    },
                },
            },
        };

我使用 package jso-to-css工作正常，但如果嵌套 object 像 hover 返回[Object]

base{background:red;:hover:[object Object]}

代替

base{background:red;}
base:hover{background: green;}

此外，欢迎任何与 react 兼容的建议。

Answer 1

如果您更改您的数据结构 - 您可以轻松地从 object 或 JSON 等创建样式规则。

了解样式规则的结构包含三个部分 -选择器/属性和值- 您可以创建一个数据结构以允许将它们解析为字符串，然后插入到现有样式表中 - 或者您可以创建一个全新的样式表, append 把它放到文件头再插入规则。

您将需要创建一个计划以允许代码了解嵌套 - 例如 - 我使用伪状态作为子数组以允许基本元素的样式 - 并迭代伪状态数组并为每个 - 将其传递给与原始基本元素相同的 createStyle function 并创建其样式规则...您可以使用任何类型的样式和任何深度进行此操作-您只需要对其进行计划并更新数据结构以匹配计划的样式.

在下面 - 我正在设置 p 元素的背景颜色和文本颜色，然后在 hover 上进行更改。 您可以将其扩展为具有选择器的类型（id 或类） - 但将其留作进一步开发。 这包括“#”或“.” 在选择器中。

 const options = [{ selector: '.base', declarations: [{ property: 'background', value: 'red', },{ property: 'color', value: 'white', }], pseudoStates:[{ selector: ':hover', declarations: [{ property: 'background', value: 'green' },{ property: 'color', value: 'orange' },{ property: 'cursor', value: 'pointer' }] }] }, { selector: '#extra', declarations: [{ property: 'background', value: 'aqua', },{ property: 'color', value: 'black', }], pseudoStates:[{ selector: ':hover', declarations: [{ property: 'background', value: 'blue' },{ property: 'color', value: 'white' }] }] }] options.forEach(function(option){ createStyleRule(option.selector, option.declarations); option.pseudoStates.forEach(function(pS){ createStyleRule(option.selector + pS.selector, pS.declarations); }) }); function createStyleRule(selector, declarations){ let styleDeclarations = []; declarations.forEach(function(dec){ styleDeclarations.push( dec.property +": " + dec.value); }) let styleRule = selector + " {" + styleDeclarations.join("; ") + "}"; document.styleSheets[0].insertRule(styleRule, 0); }

 <p class="base">This is the base element</p> <p id="extra">This is the extra element</p>