How to retrieve plain CSS from inline style in ReactJS? - css

Question

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.
I do the following. It prints the style objects. e.g.,
{"display":"flex","flexDirection":"column"}
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 (
<div>
<div style={style}>
<div id={1}>1</div>
<div id={2}>2</div>
<div id={3}>3</div>
<div id={4}>4</div>
</div>
<div>{JSON.stringify(style)}</div>
</div>
);
}
}
export default Sample;
I expect the output as plain CSS instead of inline style object. e.g., "display: flex; flex-direction: column;"

Answer 1

This is some hack, but it will fulfil your requirement.
import React, {Component} from 'react';
class Sample extends Component {
constructor(props) {
super(props);
this.state = {
style: {
display: "flex",
flexDirection: "column"
},
}
}
getStyle(){
let styled = '{';
Object.keys(this.state.style).forEach(e => {
let key = e.split(/(?=[A-Z])/).join('-').toLowerCase()
styled += `${key}:${this.state.style[e]};`
});
styled += '}'
return styled;
}
render() {
const {style} = this.state;
return (
<div>
<div style={style}>
<div id={1}>1</div>
<div id={2}>2</div>
<div id={3}>3</div>
<div id={4}>4</div>
</div>
<div>{this.getStyle()}</div>
</div>
);
}
}
export default Sample;
Demo

Answer 2

Best way would be configure webpack to extract css to a new file.
npm install extract-text-webpack-plugin --save-dev
npm install style-loader css-loader --save-dev
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
}

Answer 3

I come across ReactJS ref document. And I tried the below way. It works as I was expecting. Demo
import React, { Component } from "react";
class Sample extends Component {
constructor(props) {
super(props);
this.itemContainerRef = React.createRef();
this.state = {
style: {
display: "flex",
flexDirection: "column"
},
itemContainerCSS: {}
};
}
componentDidMount() {
this.setState({
itemContainerCSS: this.itemContainerRef.current.style.cssText || {}
});
}
render() {
const { style, itemContainerCSS } = this.state;
return (
<div>
<div style={style} ref={this.itemContainerRef}>
<div id={1}>1</div>
<div id={2}>2</div>
<div id={3}>3</div>
<div id={4}>4</div>
</div>
<div>{JSON.stringify(itemContainerCSS)}</div>
</div>
);
}
}
export default Sample;