Use inline style in React with plain CSS string

Question

I am rewriting an existing App which was based on AngularJS in ReactJS. In the App the user has the possibility to provide a CSS style string to style certain elements. In AngularJS this was no problem, I just set the 'style' attribute to the given string. In ReactJS I cannot do this anymore, because ReactJS requires a style object. I do not want to change the behavior of the application and require users to now provide a ReactJS compatible style object. Is there any way in ReactJS to just use a plain CSS style string to set the style of an element?

Answer 1

This is a hack I found for reagent, but I believe it'll work equally well for raw react versions >= 16 (where custom dom attributes are passed threw). Just use the upper case STYLE attribute instead of lower case style, which is intercepted by React.

Answer 2

complementing taylor michels' answer

function CSSstring(string) {
  const css_json = `{"${string
    .replace(/; /g, '", "')
    .replace(/: /g, '": "')
    .replace(";", "")}"}`;

  const obj = JSON.parse(css_json);

  const keyValues = Object.keys(obj).map((key) => {
    var camelCased = key.replace(/-[a-z]/g, (g) => g[1].toUpperCase());
    return { [camelCased]: obj[key] };
  });
  return Object.assign({}, ...keyValues);
}


return <div style={CSSstring("margin-top: 4px; top: 100px")}></div>