Style vanilla JavaScript apps with Emotion
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.
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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!