Convert CSS to React.js Style

Question

I am using Elementor as a REST Api and I am getting bunch of strings in React side in this shape :

selector a {
    width: 189px;
    line-height: 29px;
}

Is there any library that can convert CSS with Pseudo to inline style in React? I tried to use https://www.npmjs.com/package/style-to-js library but it doesn't support brackets and Pseudo

Answer 1

So if what you want to do is apply this styles when you receive the response, you can do something like this with vanilla JS

 var styleTxt=".container {background-color:grey;color:orange;width:100px;} footer {heigth: 50px;background-color:black} button {color:white; font-size: 15px; border: 1px solid white; background: transparent}" setTimeout(()=>{ var element = document.createElement('style'); element.setAttribute('type', 'text/css'); element.innerHTML = styleTxt; document.head.append(element); }, 2000)

 <div class="container"> <span>Test for dinamic css</span> <footer> <button>Test</button> </footer> </div>

styleTxt will be the response of the call.

I just put the timeout so you can see the before and after :)