Instructor: [00:00] As you can see, we have two buttons. One is a SASS button, which is already implemented, and it is blue. The other one is CSS-in-JS button, and it is currently unstyled. Now, let's implement a button using CSS-in-JS, but let's have a look first at the SASS button.
[01:25] Here, we have our selector. Here, we have our CSS rule declaration. As you can see, we use Tor and Tor-base in order to use the variables. This is called interpolation. Now, as we have defined this CSS-in-JS button, we have to render it. As you can see, we can render it really simple.
[01:47] What do we do here? First thing, we create a style tag. Then, we insert this style tag into the head of the document. Then, we use text content setter in order to render our styles.
I'm still not sure how to use it in react, can you tell me how to do that part in react: document.head.appendChild( document.createElement('style') ).textContent = button
basically I don't know how to connect it to react cra app
This course so far is about foundational knowledge, not React specific.
@damianjnc for something specific to React you could refer to https://github.com/emotion-js/emotion
I think it is a specific issue with your code. If you really inject styles first, html second, you would not see the FOUC. Feel free to post a reproducible example on codesandbox.