How to retrieve plain CSS from inline style in ReactJS?

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;"

Why do you need that for? As far as I knot it's not possible to do that because its jsx code even though it is similar to css code. — vitomadio
– vitomadio, Commented May 17, 2019 at 11:05

ravibagul91 · Accepted Answer · 2019-05-17 10:59:20Z

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

edited May 17, 2019 at 10:59

answered May 17, 2019 at 10:37

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alexandre Rodrigues · Accepted Answer · 2019-05-17 12:09:28Z

1

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"),
  ]
}

answered May 17, 2019 at 12:09

Alexandre Rodrigues

7305 silver badges12 bronze badges

Comments

Akshay Bosamiya · Accepted Answer · 2019-05-18 09:07:33Z

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;

Collectives™ on Stack Overflow

How to retrieve plain CSS from inline style in ReactJS?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related