How to create List Component with Emotion ?
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
Share your thoughts in the comments
Please Login to comment...