@compiled/react

React 16React 17React 18

The primary entrypoint package for Compiled that provides familiar APIs to style your app.

npm install @compiled/react

CSS prop

Use the CSS prop in conjunction with our css function call to style a JSX element.

/** @jsxImportSource @compiled/react */
import { css } from '@compiled/react';

const baseStyles = css({
  fontSize: '12px',
});

const primaryStyles = css({
  color: 'blue',
});

const Component2 = <div css={styles} />;

const Component3 = <div css={[styles, isPrimary && primaryStyles]} />;

CSS Map

Use cssMap to define a map consisting of named CSS rules that can be statically typed and useable with other Compiled APIs.

import { cssMap } from '@compiled/react';

const borderStyleMap = cssMap({
  none: { borderStyle: 'none' },
  solid: { borderStyle: 'solid' },
});

const Component = ({ appearance, children }) => (
  <div css={borderStyleMap[props.appearance]}>{children}</div>
);

Keyframes

Use keyframes to define keyframes to be used in a CSS animation.

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

const fadeOut = keyframes({
  from: {
    opacity: 1,
  },
  to: {
    opacity: 0,
  },
});

Deprecated APIs

[Deprecated] Styled

Use styled to create a component that styles a JSX element which comes with built-in behavior such as ref and as prop support.

import { css, styled } from '@compiled/react';

styled.div`
  font-size: 12px;
  color: ${(props) => props.color};
`;

styled.div({
  fontSize: 12,
  color: (props) => props.color,
});

styled.div([
  css`
    font-size: 12px;
  `,
  { color: (props) => props.color },
]);

styled.div(
  css`
    font-size: 12px;
  `,
  { color: (props) => props.color }
);

[Deprecated] ClassNames

Use ClassNames for when styles are not necessarily used on a JSX element.

import { css, ClassNames } from '@compiled/react';

<ClassNames>
  {({ css, style }) =>
    children({
      style,
      className: css({ fontSize: 12 }),
    })
  }
</ClassNames>;

<ClassNames>
  {({ css, style }) =>
    children({
      style,
      className: css`
        font-size: 12px;
      `,
    })
  }
</ClassNames>;

<ClassNames>
  {({ css, style }) =>
    children({
      style,
      className: css([
        css`
          font-size: 12px;
        `,
        { color: 'blue' },
      ]),
    })
  }
</ClassNames>;

Suggest changes to this page ➚

Guides

Testing

react/runtime