Sometimes we want to load the CSS asynchronously to reduce the intial page load and you can do the same by adding media="print" onload="this.media='all' to the link as below.

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

Let’s dive into the details of the above:

• The link’s media attribute is set to print.
• print is a media type that applies to print-based media or when the user tries to print the page.
• By using media="print", the CSS file loads asynchronously (since it’s not needed immediately for screen display).
• However, we still want to apply the styles to the page for screen use.
• To achieve this, we can use the onload attribute to change the link’s media to all once it finishes loading.

References

filamentgroup

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