title: How to retrieve plain CSS from inline style in ReactJS?
body: <p>I'm using inline style to style the HTML DOM element. I want to display converted plain CSS. I'm changing the inline style using component state.</p>
  
  <p>I do the following. It prints the style objects. e.g., 
  <code>{"display":"flex","flexDirection":"column"}</code></p>
  
  <pre class="lang-js prettyprint-override"><code>import React, {Component} from 'react';
  
  class Sample extends Component {
    constructor(props) {
      super(props);
      this.state = {
        style: {
            display: "flex", 
            flexDirection: "column"
        },
      }
    }
    render() {
      const {style} = this.state;
      return (
        &lt;div&gt;
          &lt;div style={style}&gt;
            &lt;div id={1}&gt;1&lt;/div&gt;
            &lt;div id={2}&gt;2&lt;/div&gt;
            &lt;div id={3}&gt;3&lt;/div&gt;
            &lt;div id={4}&gt;4&lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;{JSON.stringify(style)}&lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Sample;
  </code></pre>
  
  <p>I expect the output as plain CSS instead of inline style object. e.g., <code>"display: flex; flex-direction: column;"</code></p>