Let's create a React project using create-react-app CLI,

npx create-react-app emotion-setup

Then install Emotion libraries. We are going to use their styled library,

yarn add @emotion/react @emotion/styled

• @emotion/react is the core react library from Emotion
• @emotion/styled will provide modules to create styled-components using Emotion

Now, our idea is to remove all the CSS files and load styles using Emotion components. There are two CSS files - index.css and App.css.

• index.css will contain the overall generic styles like fonts, reset.css, etc.,
• App.css will contain the actual styles for the application.

We will load the index.css contain through Global component from emotion library,

Create a new file named global-styles.js in the src folder.

import { Global, css } from '@emotion/react';

const GlobalStyles = () => {
  return (
    <Global
      styles={css`
        body {
          margin: 0;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
            'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
            'Helvetica Neue', sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }

        code {
          font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
            monospace;
        }
      `}
    />
  );
};

export default GlobalStyles;

Let's remove index.css file and its reference, then add this global styles component in index.js file,

import React from 'react';
import ReactDOM from 'react-dom';
import GlobalStyles from './global-styles';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <GlobalStyles />
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Now let's move on to convert the App.css file.

import styled from '@emotion/styled';
import { keyframes } from '@emotion/react';

const AppContainer = styled.div`
  text-align: center;
`;

const AppLogoSpin = keyframes`
from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;

const AppLogo = styled.img`
  height: 40vmin;
  pointer-events: none;
  @media (prefers-reduced-motion: no-preference) {
    animation: '${AppLogoSpin}' infinite 20s linear;
  }
`;

const AppHeader = styled.header`
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
`;

const AppLink = styled.a`
  color: #61dafb;
`;

We can add the styled component inline on the App.js file. The updated App.js file will be,

import styled from '@emotion/styled';
import { keyframes } from '@emotion/react';
import logo from './logo.svg';

const AppContainer = styled.div`
  text-align: center;
`;

const AppLogoSpin = keyframes`
from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;

const AppLogo = styled.img`
  height: 40vmin;
  pointer-events: none;
  @media (prefers-reduced-motion: no-preference) {
    animation: '${AppLogoSpin}' infinite 20s linear;
  }
`;

const AppHeader = styled.header`
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
`;

const AppLink = styled.a`
  color: #61dafb;
`;

function App() {
  return (
    <AppContainer>
      <AppHeader>
        <AppLogo src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <AppLink
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </AppLink>
      </AppHeader>
    </AppContainer>
  );
}

export default App;

You can safely remove App.css. If everything goes well, then it will render the same default create-react-app through the emotion library based styles.

Check out the working code example on codesandbox,

If you want to learn different ways to style React components and applications, then check out our latest course "Styling React applications"