如何在 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>