Writing CSS

Write CSS using objects and objects with the css and cssMap APIs in Compiled.

import type { ReactNode } from 'react';
import { css } from '@compiled/react';

type CardProps = {
  children: ReactNode;
};

const cardStyles = css({
  backgroundColor: 'blue',
  boxShadow: token('elevation.shadow.raised'),
  padding: token('space.100'),
});

const Card = ({ children }: CardProps) => <div css={cardStyles}>{children}</div>;

Atlassian employees should use Atlassian Design System tokens instead of plain string values.

Depending on your configuration, you might need /** @jsxImportSource @compiled/react */ or /** @jsx jsx */ at the start of your file -- see Installation for more details.

Writing pseudo-selectors

The & character references the parent selector(s). If there is no parent selector, it references the element that the css/cssMap/styled function call is applied on.

We can use this to define pseudo-selectors and pseudo-elements. In the example below, the two selectors (textarea and input) both alter the color on the :hover pseudo selector.

const styles = css({
  color: '#a7a7a7',
  '&:hover': {
    color: '#000',
  },
});

const CustomBox = () => <div css={styles}>Custom box</div>;

is processed into:

const CustomBox = () => <div className="_syazswos _30l3r3uz">Custom box</div>;

._syazswos {
  color: #a7a7a7;
}
._30l3r3uz:hover {
  color: #000;
}

We recommend only using this on the current element, to minimise superfluous styles being generated in the stylesheet. For example, &:hover and &::after are okay, but &:hover div or div &:hover are not.

Writing more complex components

See the UI Styling Standard migration guide for a detailed guide on how to write your styles in Compiled.

Vendor prefixing

Auto-prefixing CSS declarations enables us to ignore slight browser differences and instead concentrate on the experiences we're developing.

If we had this style:

const styles = css({
  userSelect: 'none',
});

Compiled will first convert it into this CSS:

user-select: none;

It will then add auto-prefixes, as necessary:

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Suggest changes to this page ➚