Become a member
to unlock all features

Level Up!

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


    Style vanilla JavaScript apps with Emotion

    Simon VrachliotisSimon Vrachliotis

    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.



    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




    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