CODEWITHSUNDEEP
cssreactjs
Akshay Bosamiya
Akshay Bosamiya

Reputation: 77

How to retrieve plain CSS from inline style in ReactJS?

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

Upvotes: 2

Views: 1232

Answers (3)

Akshay Bosamiya
Akshay Bosamiya

Reputation: 77

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;

Upvotes: 0

Alexandre Rodrigues
Alexandre Rodrigues

Reputation: 730

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

Upvotes: 1

ravibagul91
ravibagul91

Reputation: 20765

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

Upvotes: 1

Related Questions