Creating CSS Components with Emotion JS

Emotion is a library designed for writing CSS styles with JavaScript. Yes, you read that right. More than that, it aims to provide styling for components made with vanilla JavaScript or even React.

By including Emotion into your existing web applications, you gain flexibility, customization, and developer experience.

In this article, we’re going to demonstrate its power through the implementation of a blog page made with React and Emotion only. At the end of the article, we’ll have the following screen developed:

Creating a blog page with React and Emotion JS

Setup

First, make sure you have the latest versions of Node.js and npm installed on your machine. Then, let’s easily create a new React project via command:

npx create-react-app emotion-app

You can give whatever name you want to your application. This command will auto-generate a bunch of files necessary to work with React.

Now, let’s run the following command to add the needed Emotion dependencies:

npm install --save @emotion/core @emotion/styled

Alternatively, you can run the commands above along with Yarn.

Creating the components

Within the src/ folder, you must create another one called components/. Inside of it, we’ll create a new file called Body.js and place the following content into it:

import React from “react”;

import styled from “@emotion/styled”;

const Button = styled.button`

  width: 100px;

  height: 40px;

  cursor: pointer;

`;

const ThumbImg = styled.img`

  max-width: 400px;

`;

const Body = () => {

  return (

    <>

      <ThumbImg src=”https://camo.githubusercontent.com/209bdea972b9b6ef90220c59ecbe66d35ffefa8a/68747470733a2f2f63646e2e7261776769742e636f6d2f746b6834342f656d6f74696f6e2f6d61737465722f656d6f74696f6e2e706e67″ />

      <header>

        <h3 css={{ color: “lightgreen” }}>

          Hello World, <u>Emotion</u>!!

        </h3>

      </header>

      <Button onClick={() => alert(“Hello World, Emotion!”)}>Let’s go!</Button>

    </>

  );

};

export default Body;

This is the code for our blog’s body part. At the beginning of it, you can refer to our first Emotion import: the @emotion/styled package.

There, we can find Emotion’s styled feature, which allows us to create inline CSS styles for our components. For example, the Button component is receiving a bunch of CSS style rules to customize it. Anywhere in the code that you use this component, the same style will be applied.

The same happens to the ThumbImg. You can place as many CSS rules as you want. Or even create many versions of the same component.

To use it alongside React render blocks, just explicitly call them as ordinary components.

Alternatively, you can stylize your components via css property. But that’s React-based already.

Move on to the second file called BlogHeader.js. Create it under the components folder and place the following content into it:

import React from "react";
import styled from "@emotion/styled";

const Header = styled.h5`
  display: flex;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  margin: 0;
  margin-bottom: 5rem;
  flex-direction: row;
`;

const Logo = styled.h5`
  margin: 0;
  margin-right: auto;
  font-size: 1.25rem;
  color: black;
`;

const Menu = styled.nav`
  margin-right: 1rem;
`;

const MenuLink = styled.a`
  color: #343a40;
  padding: 0.5rem;
  color: black;
  font-size: 1rem;
`;

const BlogHeader = () => {
  return (
    <>

        Emotion JS
          Home
          About
          Services
          Contact
        
      
    </>
  );
};

export default BlogHeader;

This is our page header. Here, we have a couple more components. They work the same way as the previous code listing, with the difference of being nested this time.

Yes, Emotion also allows us to nest components, just like you’d do with React normally.

Emotion will stack them as you state and add the referenced attributes to the final components.

See how clean your code becomes since we’re removing all the inline styling rules as well as the CSS classes. Obviously, you can always customize some style rules to one specific component rather than creating a whole new styled component.

Now, let’s mount them within the App.js file. Open it, and change the contents as follows:

import "./App.css";
import Header from "./components/BlogHeader";
import Body from "./components/Body";

function App() {
  return (

  );
}

export default App;

Next steps

As homework, I’d recommend you implement a footer component for our blog page. Also, don’t forget to give a good read over the Emotion official docs in order to have a better understanding of the library. Good luck!