Retrieve the <style> tag response and inject it into the head section of the HTML using React

Question

Retrieve the <style> tag response and inject it into the head section of the HTML using React

Although I am aware that this may not be the best practice, it seems to be the most suitable solution for this particular case. The server response contains something like this:

<style id="styles">.color_txt{color:green;}</style>

I am attempting to append it to the head tag:

 let styleEl = new DOMParser().parseFromString(res.data.html, "text/xml");
 styleEl.type= "text/css";
 // Remove current style
 document.getElementById('styles').remove();
 document.getElementsByTagName('head')[0].appendChild(styleEl.documentElement);

Even though I can see that the new style is added to the head tag, the issue arises when the style is not applied and instead removed from the elements. It's worth mentioning that I am using React.

//EDIT

I have also noticed that manually adding style via the web console in the newly created style tag doesn't apply it either.

javascript css reactjs

Answer 1

Answer №1

If you're looking for a solution, check out this library: https://www.npmjs.com/package/react-style-tag

Want to know how to implement it? Here's an example:

import React, { Component } from "react"; 
import { Style } from "react-style-tag";

class App extends Component {
  constructor(props) {
     super(props);
     this.state = { styleTag: false };
     fetchStyleTag().then(styleTag => {
        this.setState({ styleTag });
     });
  }
  render() {
    const { styleTag } = this.state;
    return styleTag && <Style>{ styleTag }</Style>;
  }
}

Answer 2

If you're looking for a solution, check out this library: https://www.npmjs.com/package/react-style-tag

Want to know how to implement it? Here's an example:

import React, { Component } from "react"; 
import { Style } from "react-style-tag";

class App extends Component {
  constructor(props) {
     super(props);
     this.state = { styleTag: false };
     fetchStyleTag().then(styleTag => {
        this.setState({ styleTag });
     });
  }
  render() {
    const { styleTag } = this.state;
    return styleTag && <Style>{ styleTag }</Style>;
  }
}

Retrieve the <style> tag response and inject it into the head section of the HTML using React

Answer №1

Similar questions

Creating a new list by grouping elements from an existing list

Next.js page transitions causing Google Tag Manager to malfunction with 'react-gtm-module'

Are there any specific ERD diagrams available for Json data formats?

Can you explain the distinction between the two methods of coding in jQuery?

What steps do I need to take to ensure NextJS stores my edits in VSCode?

When URL string parameters are sent to an MVC controller action, they are received as null values

"Typescript throws a mysterious 'Undefined value' error post-assignment

such as in the post schema, the word "like" does not

The issue lies with Express Mongoose failing to store the data

express-validator: bypass additional validation in a user-defined validator

What were the shifts in data fetching methods from pre-13.4 versions of NextJS to v13.4 and beyond?

Guide to organizing an HTML table column with a header click using PHP and MySQL

Express JS encountering Firebase Google Sign-In glitch

An error has occurred in the Next.js App: createContext function is not defined

My Node setup is not displaying my scene with the THREE.js Software Renderer

AngularJS- issue with button visibility on 'toolbar' widget

Apologies, but it seems there was an issue reading the "checked" property as it is null

What is the best location to store a ReactJS file?

Prevent Android WebView from attempting to fetch or capture resources such as CSS when using loadData() method

What is preventing me from displaying my paragraph?