Function className

className(properties: CSSInterpolation): string

Creates dynamic CSS class name.

The resulting CSS will automatically be made available when the component using it is rendered.

Note that CSS class names are generated and guaranteed to be unique for the given properties.

Parameters

properties: CSSInterpolation

Returns string

Example: Apply basic CSS to an element

// Create CSS definition and bind it to a variable
const header = className({ fontSize: 16, fontWeight: bold });

function MyComponent() {
  // Apply that class name to an element
  return <span className={header}>Header</span>
}

Example: Use pseudo-classes and descendant selectors

const list = className({
  // Give the entire list a yellow background color
  background: 'yellow',

  // Apply rules to all direct descendant `li` elements
  '> li': {
    color: 'blue',

    // Apply an underline to a `li` that has `:hover`
    ':hover': { textDecoration: 'underline' }
  }
});

function MyComponent() {
  return (
    <ul className={list}>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  );
}