Open In App

How to create List Component with Emotion ?

Improve
Improve
Like Article
Like
Save
Share
Report

Emotion is a JavaScript library for creating CSS styles. It offers strong and predictable style composition, as well as an excellent developer experience with features like source maps, labels, and testing utilities. Emotion is essentially a CSS-in-JavaScript library, and one notable feature of CSS-in-JavaScript libraries is the ability to associate components with styles. The ability to connect them in a scope ensures that some component styles do not conflict with others, which is critical for our component library.

Emotion has two excellent APIs which can be handled in React:

  • @emotion/styled: The styled API, which is based on the core API, approaches styling components in a somewhat different way. This API is invoked with a specific HTML element or React component, and that element is invoked with an object or a template string containing the element’s styles.
  • @emotion/core: The core API is similar to the ordinary style property we use today when developing React apps, with the addition of vendor prefixing, nested selectors, media queries, and other features.

We will be using @emotion/styled for making our List with Emotion.

First of all, we will start with creating a React app in VS Code.

Step 1: Create React app by writing the below code in any command line.

npx create-react-app app_name

Step 2: Then, we have to move into the folder we will be working on.

cd project_name

Step 3: We will be installing the @emotion/styled library for working on our project.

npm i @emotion/styled

Project Structure:  After creating React App and installing all the dependencies, the folder structure will look similar to the figure given below.

Folder structure

Steps to run the application: Write the below code in the terminal to run the server:

npm start

Import: After starting our app we have to now import the @emotion/styled in our project component by the following code given below:

import styled from "@emotion/styled";

Example 1: The below example will illustrate the Simple Ordered and Unordered list:

Javascript




import styled from "@emotion/styled";
  
const OrderedList = styled('ol')`
    font-size: 20px;
    margin-left: 100px;
    list-style-type: numeric;
    margin-bottom: 20px;
 `;
const UnorderedList = styled('ul')`
    font-size: 20px;
    margin-left: 100px;
    list-style-type: circle;
 `;
const ListItem = styled('li')`
    font-size: 18px;
 `;
const Heading = styled.div`
    font-size: 20px;
    font-weight: bold;
    margin-left: 80px;
 `;
  
const List = () => {
    return (
        <div>
            <Heading>This is an Ordered List</Heading>
            <OrderedList>
                <ListItem>apple</ListItem>
                <ListItem>orange</ListItem>
            </OrderedList>
            <Heading>This is an Unordered List</Heading>
            <UnorderedList>
                <ListItem>apple</ListItem>
                <ListItem>orange</ListItem>
            </UnorderedList>
        </div>
    );
}
  
export default List;


Output:

Simple Ordered and Unordered Lists

 

Example 2: The below example will illustrate the Changing colors of our lists. Here we have used the color property provided by @emotion/styled:

Javascript




import styled from "@emotion/styled";
  
const OrderedList = styled('ol')`
    font-size: 20px;
    margin-left: 100px;
    list-style-type: numeric;
    margin-bottom: 20px;
    color: red;
 `;
const UnorderedList = styled('ul')`
    font-size: 20px;
    margin-left: 100px;
    list-style-type: circle;
    color: green;
 `;
const ListItem = styled('li')`
    font-size: 18px;
 `;
const Heading = styled.div`
    font-size: 20px;
    font-weight: bold;
    margin-left: 80px;
    color: blue;
 `;
  
const List = () => {
    return (
        <div>
            <Heading>This is an Ordered List</Heading>
            <OrderedList>
                <ListItem >apple</ListItem>
                <ListItem>orange</ListItem>
            </OrderedList>
            <Heading>This is an Unordered List</Heading>
            <UnorderedList>
                <ListItem>apple</ListItem>
                <ListItem>orange</ListItem>
            </UnorderedList>
        </div>
    );
}
  
export default List;


Output:

Colored Lists



Last Updated : 02 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads