将JSON CSS应用于React组件？

Question

I'm creating a component that must pass along JSON-ified CSS to an external source which uses it to render a styled iframe. Some of these styles should affect part of the parent, but all will need to be passed along.

Is there a good way to interpret the passed in JSON/CSS and apply it?

Would it be better to accept CSS in another form in the parent, but then translate it to JSON before passing it along?

The JSON would be passed as something like this:

 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

Install css-to-json

npm install css-to-json

Use it.

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

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

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

Try this when applying the styles:

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]);
  })
})