Convert Sass (SCSS) Styled Button to CSS-in-JS with JavaScript Templates and Variables
This is an introduction to CSSinJS that doesn't require any JavaScript knowledge, just a basic CSS.
It shows how to convert a very basic button written in Sass (SCSS) to CSSinJS without using any CSS in JS libraries. It uses native JavaScript variables and template literals.
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.
[00:20] We use variables in this example in order to demonstrate how you would structure a large application. Now, let's re-implement the same button using CSS-in-JS. First of all, let's create the button JS file. Now, let's import this button in the main index. We had a bunch of variables in the SASS button. Let's write the same variables in JavaScript.
[00:44] Two things you have to know about variables over here. In JavaScript, we have to use const statement in order to declare a constant. The second thing is we have to use quotes around the values. The reason is CSS is not native to JavaScript, which means JavaScript doesn't know about CSS primitives. We have to define them as strings.
[01:07] Now, let's declare the button style. As you can see, we have a constant for the button, and we have these backticks over here. Backticks allow us to write [inaudible] align strings in JavaScript. They are also called template literals because they allow us to use variables in site.
[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.
Best, Oleg