javascript - 将 JSON CSS 应用于 React 组件？

Question

我正在创建一个组件，该组件必须将 JSON 化 CSS 传递到外部源，外部源使用它来呈现样式化的 iframe。其中一些样式会影响父级的一部分，但所有样式都需要传递。

有没有好的方法来解释传入的JSON/CSS并应用它？

在父级中接受另一种形式的 CSS，然后在传递之前将其转换为 JSON 会更好吗？

JSON 将像这样传递:

const styles = { // optional
    "input": {
      "width": "100%",
      "font-family": "'Helvetica Neue',Helvetica,Arial,sans-serif",
      "font-size": "14px",
      "color": "#555",
      "height": "34px",
      "padding": "6px 12px",
      "margin": "5px 0px",
      "line-height": "1.42857",
      "border": "1px solid #ccc",
      "border-radius": "4px",
      "box-shadow": "0px 1px 1px rgba(0,0,0,0.075) inset",
      "-webkit-transition": "border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s",
      "transition": "border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s",
    },
    "select": {
      "width": "100%",
      "font-family": "'Helvetica Neue',Helvetica,Arial,sans-serif",
      "font-size": "14px",
      "color": "#555",
      "height": "34px",
      "padding": "6px 12px",
      "margin": "5px 0px",
      "line-height": "1.42857",
      "border": "1px solid #ccc",
      "border-radius": "4px",
      "box-shadow": "0px 1px 1px rgba(0,0,0,0.075) inset",
      "-webkit-transition": "border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s",
      "transition": "border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s",
    }
    };

Answer 1

安装css-to-json

npm install css-to-json

使用它。

// To JSON
var json = CSSJSON.toJSON(cssString);

// To CSS
var css = CSSJSON.toCSS(jsonObject);

You don't have to accept CSS in another form.

在应用样式时试试这个:

function camelize(str) {
        var bla = str.split('-')
    .map((s) => s.charAt(0).toUpperCase() + s.substring(1))
    .join('');
    return bla && bla[0].toLowerCase() + bla.slice(1);
}

Object.keys(styles).map((key, index) => {
    Object.keys(styles[key]).map((key2, index2) => {
    key2 = camelize(key2)
    document.querySelector(key).style.key2 = styles[key][key2]);
  })
})