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