Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Style vanilla JavaScript apps with Emotion

    Simon VrachliotisSimon Vrachliotis
    javascriptJavaScript
    cssCSS

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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

    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.

    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.

    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

    tag.