Load Css classes as string in React Component

Question

I have an object in which CSS file code is coming like a string. Like

{    
    css: ".button { color: green } .button:after { color: red }"
}

How can I load CSS as a string in my React Component?

If you are able to read that string just parse it, split it by '.' and also by '{' and '}' — Rafael Mora
– Rafael Mora, Commented Jul 31, 2021 at 11:58
you can append css together and put them inside a <style> tag to make them accessible; then add appropriate classes to elements you need — Mechanic
– Mechanic, Commented Jul 31, 2021 at 12:00
@Mhmdrz_A how can I put a string inside a style? can you please share a snippet of code? — Zuhair Naqi
– Zuhair Naqi, Commented Jul 31, 2021 at 12:02
@ZuhairNaqi, You can do something like this let c = { css: ".submit { color: green } .cancel { color: red }" }; let stl = document.createElement("style"); stl.innerText = c.css; document.body.append(stl); — Harsh Saini
– Harsh Saini, Commented Jul 31, 2021 at 12:05

Mechanic · Accepted Answer · 2021-07-31 12:18:52Z

1

Here is an example of putting css into style tag to be used later

Appending to documnet.head can pollute global css scope; so if that is problematic you can append style to the element you are rendering, therefore the style will be unmounted after component unmounted

function mountStyles ( stylesStr ) {
  const styleTag = document.createElement('style');
  styleTag.textContent = stylesStr;
  document.head.appendChild(styleTag);
}

const someCSS = ".button { color: green } .button:after { color: red } ";

test.addEventListener('click', ()=> {
  mountStyles(someCSS);
})

<span class='button'> imagniray button </span>
<button id='test' > Click me </button>

edited Jul 31, 2021 at 12:18

answered Jul 31, 2021 at 12:10

Mechanic

5,4484 gold badges19 silver badges44 bronze badges

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

Collectives™ on Stack Overflow

Load Css classes as string in React Component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related