Skip to main content

emotion-react

position: 1​

The exported objects and functions in emotion library

In the @emotion/react library, several commonly used objects and functions are exported to facilitate the use of CSS-in-JS in React applications. Here is an overview of the key exports from @emotion/react:

Key Exports from @emotion/react​

1. css - Usage: Used to create a class name from styles defined in JavaScript. - Example:

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

const buttonStyle = css`
  background: palevioletred;
  border-radius: 3px;
  border: none;
  color: white;
`;

2. Global - Usage: Allows you to apply global styles. - Example:

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

const globalStyles = css`
  body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
`;

function App() {
  return (
    <>
      <Global styles={globalStyles} />
      <div>My App</div>
    </>
  );
}

3. keyframes - Usage: Used to create animations. - Example:

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

const bounce = keyframes`
  from, 20%, 53%, 80%, to {
    transform: translateY(0);
  }
  40%, 43% {
    transform: translateY(-30px);
  }
  70% {
    transform: translateY(-15px);
  }
  90% {
    transform: translateY(-4px);
  }
`;

const bounceStyle = css`
  animation: ${bounce} 1s ease infinite;
`;

4. ThemeProvider - Usage: Provides a theme to your application. - Example:

import { ThemeProvider } from '@emotion/react';

const theme = {
  colors: {
    primary: 'hotpink',
  },
};

function App() {
  return (
    <ThemeProvider theme={theme}>
      <MyComponent />
    </ThemeProvider>
  );
}

5. useTheme - Usage: Hook to access the theme in functional components. - Example:

import { useTheme } from '@emotion/react';

function MyComponent() {
  const theme = useTheme();
  return <div style={{ color: theme.colors.primary }}>Themed text</div>;
}

6. jsx - Usage: Used to enable the css prop in JSX without needing to use the Babel plugin. - Example:

/** @jsxImportSource @emotion/react */
import { css, jsx } from '@emotion/react';

function App() {
  return (
    <div
      css={css`
        color: hotpink;
      `}
    >
      This is hotpink.
    </div>
  );
}

Setting Up @emotion/react in a React Project​

1. Installation:

npm install @emotion/react @emotion/styled

2. Babel Configuration (if using Babel): - Create or update .babelrc:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@emotion"]
}

Using Emotion in Next.js​

For Next.js, you may need additional setup to configure Babel with Emotion:

1. Install Dependencies:

npm install @emotion/react @emotion/styled babel-plugin-emotion

2. Babel Configuration: - Create or update babel.config.js:

module.exports = {
  presets: ['next/babel'],
  plugins: ['@emotion']
};

3. Using Emotion's jsx with Next.js: - Update _document.js:

// _document.js
import Document from 'next/document';
import { ServerStyleSheet } from '@emotion/react';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
}

export default MyDocument;

In @emotion/styled, several commonly used exports are provided to create styled components in a React application. Here are the key exports from @emotion/styled:

Key Exports from @emotion/styled​

1. styled - Usage: The primary export from @emotion/styled is the styled function. This function is used to create styled components with tagged template literals. - Example:

import styled from '@emotion/styled';

const Button = styled.button`
  background: palevioletred;
  border-radius: 3px;
  border: none;
  color: white;
  padding: 0.5em 1em;
  cursor: pointer;

  &:hover {
    background: darkviolet;
  }
`;

function App() {
  return <Button>Click Me</Button>;
}

Detailed Explanation​

1. styled​

The styled function allows you to create components with styles attached to them. These components can be used just like any other React components but with styles already included.

Creating a Styled Component:

import styled from '@emotion/styled';

// Creating a styled button component
const Button = styled.button`
  background: palevioletred;
  border-radius: 3px;
  border: none;
  color: white;
  padding: 0.5em 1em;
  cursor: pointer;

  &:hover {
    background: darkviolet;
  }
`;

// Using the styled button component in a React app
function App() {
  return <Button>Click Me</Button>;
}

Dynamic Styles: You can use props to apply dynamic styles to your components.

import styled from '@emotion/styled';

const Button = styled.button`
  background: ${props => props.primary ? 'palevioletred' : 'white'};
  color: ${props => props.primary ? 'white' : 'palevioletred'};
  border: 2px solid palevioletred;
  border-radius: 3px;
  padding: 0.5em 1em;
  cursor: pointer;

  &:hover {
    background: ${props => props.primary ? 'darkviolet' : 'lightgray'};
  }
`;

function App() {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Default Button</Button>
    </div>
  );
}

Setting Up @emotion/styled in a React Project​

1. Installation:

npm install @emotion/react @emotion/styled

2. Using styled in a Component: - Create a styled component using the styled function and use it in your React components as shown in the examples above.