@emotion/react

@emotion/react

Simple styling in React.

Install

yarn add @emotion/react

Usage

/** @jsx jsx */
import { jsx, css, Global, ClassNames } from '@emotion/react'

render(
  <div css={{ color: 'hotpink' }}>
    <div
      css={css`
        color: green;
      `}
    />
    <Global
      styles={{
        body: {
          margin: 0,
          padding: 0
        }
      }}
    />
    <ClassNames>
      {({ css, cx }) => (
        <div
          className={cx(
            'some-class',
            css`
              color: yellow;
            `
          )}
        />
      )}
    </ClassNames>
  </div>
)

More documentation is available at https://emotion.sh.

Similar packages

Other packages similar to @emotion/react

styled-components

Styled-components is a library for React and React Native that allows you to use component-level styles in your application. It uses tagged template literals for styling, similar to @emotion/react. The main difference lies in the implementation details and syntax preferences, but both libraries aim to enhance CSS-in-JS experience.

jss

JSS (JavaScript Style Sheets) is a CSS-in-JS library that allows you to write CSS in JavaScript. It offers a different approach by focusing on a JSON-based syntax for defining styles. Compared to @emotion/react, JSS might be preferred for its use of pure JavaScript objects for styling, but lacks the tagged template literal syntax.

linaria

Linaria is a zero-runtime CSS-in-JS library that extracts CSS to separate files at build time, rather than applying styles at runtime like @emotion/react. This can result in better performance for some applications. Linaria's approach is unique in that it offers the benefits of CSS-in-JS without the runtime cost.