[Deprecated] ClassNames

Deprecated
We do not recommend using ClassNames or the className prop in any code. Please use css or cssMap instead.

Use a component where styles are not necessarily used on a JSX element.

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

export const EmphasisText = (props) => (
  <ClassNames>
    {({ css }) => (
      <span
        className={css({
          color: '#00b8d9',
          textTransform: 'uppercase',
          fontWeight: 700,
        })}>
        {props.children}
      </span>
    )}
  </ClassNames>
);

/* class-names-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}';
export const EmphasisText = (props) => (
  <CC>
    <CS>{[_, _2, _3]}</CS>
    {<span className={ax(['_syazxdf1 _1p1dangw _k48p1fw0'])}>{props.children}</span>}
  </CC>
);

Teal text

<EmphasisText>Teal text</EmphasisText>

Dynamic declarations

Change a CSS declaration at runtime, powered by CSS variables. Make sure to set the style prop.

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

export const EmphasisText = (props) => (
  <ClassNames>
    {({ css, style }) => (
      <span
        style={style}
        // ^--- make sure to set style prop
        className={css({
          color: props.primary ? '#00B8D9' : '#36B37E',
          fontWeight: 600,
        })}>
        {props.children}
      </span>
    )}
  </ClassNames>
);

/* class-names-dynamic.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
        style={{
          '--_1rs8dg7': ix(props.primary ? '#00B8D9' : '#36B37E'),
        }}
        // ^--- make sure to set style prop
        className={ax(['_syaztp2j _k48pni7l'])}>
        {props.children}
      </span>
    }
  </CC>
);

Teal text

<EmphasisText primary>Teal text</EmphasisText>

Composing styles

Composing styles through props allows your consumers to add and override styles. Make sure to pass through className and style.

/** @jsxImportSource @compiled/react */
import { ClassNames } from '@compiled/react';
import { ax } from '@compiled/react/runtime';

const EmphasisText = ({ className, children, style }) => (
  <ClassNames>
    {({ css }) => (
      <span
        style={style}
        className={ax([
          css({
            color: '#00b8d9',
            textTransform: 'uppercase',
            fontWeight: 700,
          }),
          className,
        ])}>
        {children}
      </span>
    )}
  </ClassNames>
);

export const CustomColorText = (props) => (
  <EmphasisText css={{ color: props.color }}>{props.children}</EmphasisText>
);

/* class-names-composition.tsx generated by @compiled/babel-plugin v0.32.2 */
import { ax, ix, CC, CS } from '@compiled/react/runtime';
const _4 = '._syaz4rde{color:var(--_kmurgp)}';
const _3 = '._k48p1fw0{font-weight:700}';
const _2 = '._1p1dangw{text-transform:uppercase}';
const _ = '._syazxdf1{color:#00b8d9}';
const EmphasisText = ({ className, children, style }) => (
  <CC>
    <CS>{[_, _2, _3]}</CS>
    {
      <span style={style} className={ax([ax(['_syazxdf1 _1p1dangw _k48p1fw0']), className])}>
        {children}
      </span>
    }
  </CC>
);
export const CustomColorText = (props) => (
  <CC>
    <CS>{[_4]}</CS>
    {
      <EmphasisText
        className={ax(['_syaz4rde'])}
        style={{
          '--_kmurgp': ix(props.color),
        }}>
        {props.children}
      </EmphasisText>
    }
  </CC>
);

Pink text

<CustomColorText color="pink">Pink text</CustomColorText>

Suggest changes to this page ➚

[Deprecated] styled

Other deprecated features