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.