Convert Sass (SCSS) Styled Button to CSS-in-JS with JavaScript Templates and Variables

InstructorOleg Isonen

Share this video with your friends

Send Tweet

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.

Cristian Gabbanini

~ 7 years ago

Oleg Isonen(instructor)

~ 7 years ago

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

Damian Joniec

~ 5 years ago

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

Oleg Isonen(instructor)

~ 5 years ago

This course so far is about foundational knowledge, not React specific.

Cristian Gabbanini

~ 5 years ago

@damianjnc for something specific to React you could refer to https://github.com/emotion-js/emotion