Composition

Composing styles together will enable you to reuse styles and have more flexibility.

Traditionally when defining CSS it is not the className order that ensures style get applied, but the the order of CSS rules in the DOM. This is a common cause for developer confusion.

Compiled eliminates these cascade gotchas by ensuring the last CSS property defined always wins.

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

const base = css({
  color: 'hotpink',
});

export const CompositionIdentifier = () => {
  return <span css={base}>This is hot pink.</span>;
};

/* css-prop-composition-identifier.tsx generated by @compiled/babel-plugin v0.32.2 */
import { ax, ix, CC, CS } from '@compiled/react/runtime';
const _ = '._syaz1q9v{color:hotpink}';
const base = null;
export const CompositionIdentifier = () => {
  return (
    <CC>
      <CS>{[_]}</CS>
      {<span className={ax(['_syaz1q9v'])}>This is hot pink.</span>}
    </CC>
  );
};

This is hot pink.

When composing styles together remember that the last defined style will win. In this example we can see that red overrides the pink color.

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

const danger = css({
  color: 'red',
});

const base = css({
  color: 'hotpink',
  padding: '0.5rem 0',
  backgroundColor: 'rgba(0, 0, 0, 0.05)',
});

export const CompositionMultiple = () => {
  return (
    <div>
      <div css={base}>This is hot pink.</div>
      <div css={[danger, base]}>This is also hot pink.</div>
      <div css={[base, danger]}>This is red!</div>
    </div>
  );
};

/* css-prop-composition-multiple.tsx generated by @compiled/babel-plugin v0.32.2 */
import { ax, ix, CC, CS } from '@compiled/react/runtime';
const _7 = '._syaz5scu{color:red}';
const _6 = '._bfhk11bx{background-color:rgba(0,0,0,.05)}';
const _5 = '._19bvidpf{padding-left:0}';
const _4 = '._n3td1kwk{padding-bottom:.5rem}';
const _3 = '._u5f3idpf{padding-right:0}';
const _2 = '._ca0q1kwk{padding-top:.5rem}';
const _ = '._syaz1q9v{color:hotpink}';
const danger = null;
const base = null;
export const CompositionMultiple = () => {
  return (
    <div>
      <CC>
        <CS>{[_, _2, _3, _4, _5, _6]}</CS>
        {
          <div className={ax(['_syaz1q9v _ca0q1kwk _u5f3idpf _n3td1kwk _19bvidpf _bfhk11bx'])}>
            This is hot pink.
          </div>
        }
      </CC>
      <CC>
        <CS>{[_7, _, _2, _3, _4, _5, _6]}</CS>
        {
          <div
            className={ax([
              '_syaz5scu',
              '_syaz1q9v _ca0q1kwk _u5f3idpf _n3td1kwk _19bvidpf _bfhk11bx',
            ])}>
            This is also hot pink.
          </div>
        }
      </CC>
      <CC>
        <CS>{[_, _2, _3, _4, _5, _6, _7]}</CS>
        {
          <div
            className={ax([
              '_syaz1q9v _ca0q1kwk _u5f3idpf _n3td1kwk _19bvidpf _bfhk11bx',
              '_syaz5scu',
            ])}>
            This is red!
          </div>
        }
      </CC>
    </div>
  );
};

This is hot pink.

This is also hot pink.

This is red!

Style composition works with all APIs found in Compiled. Read more about atomic CSS to understand how this works.

Suggest changes to this page ➚

Atomic CSS

Stylesheet extraction