Emotion

There are basically two ways of using emotion:

a) @emotion/css
b) @emotion/styled

Using @emotion/css

This method is mostly used if you have to override some CSS property and write your own custom CSS on existing CSS Framework or UI library such as: Bootstrap, ant design, material ui etc..

Example of using this method.

Step 1: Create .styles.ts file following the folder structure mentioned above

Step 2: Write your CSS like:

import { css } from "@emotion/css";

export const redButton = css`
  background-color: red;
`;

Step 3: Import it in your file and use it in className

import { redButton } from "./<name_of_your_file>";

return <Button className={redButton}>Click me</Button>;

Using @emotion/styled

This method is mostly useful when you have to add new html tags like div, aside or whatever you like and write a CSS in that tag

Example of using this method.

Step 1: Create .styles.ts file following the folder structure mentioned above

Step 2: Write your CSS like:

import { styled } from "@emotion/styled";

export const Button = styled.button`
  padding: 32px;
  background-color: hotpink;
  font-size: 24px;
  border-radius: 4px;
  color: black;
  font-weight: bold;
  &:hover {
    color: white;
  }
`;

Step 3: Import it in your file and use it as JSX tag

import { Button } from "./<name_of_your_file>";

return <Button>Click me</Button>;