css prop

Using a css function call on a css prop is the preferred way to apply styles to a JSX element. This is enabled when a JSX pragma is defined, and the JSX element takes a className prop.

We use a syntax similar to Emotion's css prop, but we wrap the style object in a css function call. Using the css function call allows us to apply type checking, and it makes it clear that the styles should be applied by Compiled (and not a different CSS-in-JS library).

Only use css with Compiled APIs
The return value of the css function call at runtime is null and can only be passed to the css prop, or used with other Compiled APIs.

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

const styles = css({
  color: '#00b8d9',
  textTransform: 'uppercase',
  fontWeight: 700,
});

export const EmphasisText = ({ children }) => <span css={styles}>{children}</span>;

/* css-prop-obj.tsx generated by @compiled/babel-plugin v0.32.2 */
import { ax, ix, CC, CS } from '@compiled/react/runtime';
const _3 = '._k48p1fw0{font-weight:700}';
const _2 = '._1p1dangw{text-transform:uppercase}';
const _ = '._syazxdf1{color:#00b8d9}';
const styles = null;
export const EmphasisText = ({ children }) => (
  <CC>
    <CS>{[_, _2, _3]}</CS>
    {<span className={ax(['_syazxdf1 _1p1dangw _k48p1fw0'])}>{children}</span>}
  </CC>
);

Arrange

<EmphasisText>Arrange</EmphasisText>

Using composition to combine styles

Read composition for more information around composing styles together.

Conditional rules

Conditionally apply CSS rules by passing an array to the css prop. The last styles applied in the array wins.

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

const largeTextStyles = css({
  fontSize: '48px',
  padding: '8px',
  background: '#eee',
});
const invertedStyles = css({
  background: '#333',
  color: '#fff',
});

export const LargeText = ({ inverted, children }) => {
  return <span css={[largeTextStyles, inverted && invertedStyles]}>{children}</span>;
};

/* css-prop-conditional-rules.tsx generated by @compiled/babel-plugin v0.32.2 */
import { ax, ix, CC, CS } from '@compiled/react/runtime';
const _8 = '._syazu67f{color:#fff}';
const _7 = '._bfhk1d6m{background-color:#333}';
const _6 = '._bfhkr75e{background-color:#eee}';
const _5 = '._19bvftgi{padding-left:8px}';
const _4 = '._n3tdftgi{padding-bottom:8px}';
const _3 = '._u5f3ftgi{padding-right:8px}';
const _2 = '._ca0qftgi{padding-top:8px}';
const _ = '._1wybckbl{font-size:3pc}';
const largeTextStyles = null;
const invertedStyles = null;
export const LargeText = ({ inverted, children }) => {
  return (
    <CC>
      <CS>{[_, _2, _3, _4, _5, _6, _7, _8]}</CS>
      {
        <span
          className={ax([
            '_1wybckbl _ca0qftgi _u5f3ftgi _n3tdftgi _19bvftgi _bfhkr75e',
            inverted && '_bfhk1d6m _syazu67f',
          ])}>
          {children}
        </span>
      }
    </CC>
  );
};

Helloworld

<LargeText>Hello</LargeText><LargeText inverted>world</LargeText>

Dynamic styling and props

We no longer recommend passing dynamic styling or props to Compiled, as they can be tricky for other Atlassian tooling to statically analyse.

Instead, we recommend you:

First, determine whether you truly need the styles to be dynamic. Many cases of dynamic styling can be rewritten as conditional rules or cssMap usages.
If you absolutely need to use dynamic styling, you can pass dynamic styling to the style prop. Check out the UI Styling Standard for more details.

In the past, this was how to write dynamic styles with Compiled:

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

export const EmphasisText = (props) => (
  <span
    css={css({
      color: props.primary ? '#00B8D9' : '#36B37E',
      fontWeight: 600,
    })}>
    {props.children}
  </span>
);

/* css-prop-dynamic-decl.tsx generated by @compiled/babel-plugin v0.32.2 */
import { ax, ix, CC, CS } from '@compiled/react/runtime';
const _2 = '._k48pni7l{font-weight:600}';
const _ = '._syaztp2j{color:var(--_1rs8dg7)}';
export const EmphasisText = (props) => (
  <CC>
    <CS>{[_, _2]}</CS>
    {
      <span
        className={ax(['_syaztp2j _k48pni7l'])}
        style={{
          '--_1rs8dg7': ix(props.primary ? '#00B8D9' : '#36B37E'),
        }}>
        {props.children}
      </span>
    }
  </CC>
);

Systematize

<EmphasisText primary>Systematize</EmphasisText>

Suggest changes to this page ➚

Migration

Known issues with Emotion

cssMap