In this lesson, we look at how we can style any JavaScript application with the framework agnostic "emotion" package from Emotion. We leverage the `css` function - which takes in some styles, and returns a className - to apply styles to a heading tag.

https://app.egghead.io/api/v1/lessons/javascript-style-vanilla-javascript-apps-with-emotion/subtitles

Style vanilla JavaScript apps with Emotion

Instructor: [00:00] I have a simple HTML file here with an empty div with an id of app. I also have a script tag pointing to an index.js file. In this JavaScript file, we create an <h1> tag, add some text to it, and then append that heading to our app div. Let's style this heading with emotion. We need to install emotion, yarn add @emotion and wait for it to install.

[00:23] In my index at js file, I will import CSS from emotion. Let's create a heading styles variable and use our CSS function as a tag template literal. Between the backticks, I'll paste some CSS. That provides some styling, including a nested hover state. The CSS function takes in some styles and returns a class name.

[00:45] For that reason, to apply the styles to our heading, we can add our heading styles to our class list, heading.classlist.addheadingstyles. If I refresh the browser, you can see the new styles applied and changing on hover. If we open the dev tools, you can see that the styles have been placed in the class name that was added to the <h1> tag.

Style vanilla JavaScript apps with Emotion

Share this video with your friends