Emotion
It is a CSS-in-JS library that is focused on application performance. It has more than 7.7K stars on GitHub. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. The steps on how to work with emotion are down below:
Step 1: Install the required library using the following command in your terminal:
// with npm
npm install @emotion/styled @emotion/react
Example: Now the installation is done write down the following code in the App.js file. Here is an example of how to style with the CSS-in-JS library emotion.
Javascript
/** @jsx jsx */import React from "react";import { jsx, css } from "@emotion/react";import styled from "@emotion/styled";const Wrapper = css` display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 40px; color: #444; border: 1px solid #4800f4;`;const Title = styled.h1` color: #0d1a26; font-weight: 400;`;const Button = styled("button")` padding: 8px 15px; border: none; border-radius: 5px; background-color: #4800f4; color: #fff; font-size: 14px; cursor: pointer; &:hover { transition: 0.5s; padding: 10px 20px; }`;const App = () => { return ( <div css={Wrapper}> <Title>Hello world!</Title> <Button>This is a button</Button> </div> );}; |
Step 2: Run the code below in the terminal
npm start
Output:
How to use CSS in different dimension (CSS-in-JS) ?
CSS is awesome and easy to get started with, but front-end applications have been scaling at a massive and complex rate that doesn’t make the current CSS designed for the job. CSS-in-JS is a real deal and in many ways, is very much the best nowadays when it comes to building and styling applications on the web.