How to retrieve plain CSS from inline style in ReactJS?

Related searches

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

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

Inline Styling In React, Inline CSS means defining the CSS properties using a style attribute with an HTML With React, we don't specify CSS the same way as we do with plain HTML. What I mean by this is that JSX will get transpiled into React. Inline CSS means defining the CSS properties using a style attribute with an HTML tag or adding the styles directly to the element. With plain HTML, we assign a string value to style attribute. That string will contain CSS property value pairs; each property will be separated from each other by a semicolon.

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

How to CSS Style in React, Inline CSS (also called inline style) is a little bonus on top, Plain React in 200+ pages of learning material. Get it on Amazon. Inline CSS. Inline CSS (also called inline style) is a little bonus on top, because it shouldn't replace any of the other shown CSS approaches. However, sometimes it's useful to know about it for rapid prototyping or for more dynamic CSS driven by JavaScript. For example, every HTML element comes with a style attribute.

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;

React CSS, To style an element with the inline style attribute, the value must be a JavaScript object: Since the inline CSS is written in a JavaScript object, properties with two names, like Import the stylesheet in your application: Get Certified � Examples might be simplified to improve reading and basic understanding. Tutorials� This simple little tool is intended to help translate plain CSS into the React in-line style specific JSON representation. Making it easy to copy and paste into an inline React component. Making it easy to copy and paste into an inline React component.

How to use styles in React: Inline styles, CSS Modules & Styled , We will take a look at how you can use inline styles, regular CSS classes, CSS modules… Let's get started! Inline styles are not react specific They are a regular HTML feature: CSS-in-JS with React styled components. Using inline styles in JSX. Let's start with inline styles. Inline styles are used when a single HTML element needs unique styles. Whenever there is more than one element with that exact same style, it is advised to use CSS classes instead. Inline styles are not react specific They are a regular HTML feature:

9 Ways To Implement CSS in React JS | by Dmitry Nozhenko, Inline css isn't the best way to implement css in app. In react js, inline styling is a little bit different. There are two ways So, let's get started� Is it possible to apply inline styles directly from React? If yes, the idea is to evaluate the status and set one color on another via conditional statement. javascript css reactjs

reactjs. Score 0. Posts 2. Apr 5 '18. 2 How to retrieve plain CSS from inline style in ReactJS? May 17 '19. 1 Move cypress folder from the root of the project Apr

Comments
  • 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.