Material UI and Emotion

Material UI uses Emotion as its default styling engine.

Run the following commands to add Material UI to your project:

npm install @mui/material @emotion/react @emotion/styled

Emotion Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.

There are two primary methods of using Emotion. The first is framework agnostic and the second is for use with React.

Styled Components

styled is a way to create React components that have styles attached to them. It’s available from @emotion/styled. styled was heavily inspired by styled-components and glamorous.

import styled from '@emotion/styled'

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

render(<Button>This my button component.</Button>)

References

Emotion website