# css.use / classStyle

Source: https://plumeria.dev/docs/api-reference/javascript/use



To apply styles defined in Plumeria to a component, use the `classStyle` prop or the `css.use()` function.

## classStyle [#classstyle]

```ts
type Style = StyleList<StyleNamespace>;

declare global {
  namespace React {
    interface HTMLAttributes<T> {
      classStyle?: Style;
    }
  }
}

export type { Style };
```

`classStyle` is a special prop for applying styles to components such as React. It is converted to `className` by the plugin at build time.

### Features [#features]

* Automatically excludes false values (`false`, `null`, `undefined`).

* Supports array format, making conditional branching easy.

* Subsequent styles take precedence within the array.

### Example [#example]

```tsx
import * as css from '@plumeria/core';

const styles = css.create({
  base: { color: 'red' },
  active: { fontWeight: 'bold' }
});

function Component({ active }) {
  return (
    <div classStyle={[styles.base, active && styles.active]}>
      Hello
    </div>
  );
}
```

## css.use() [#cssuse]

```ts
export type use = (...rules: Style[]) => string;
export const use: use;
```

`css.use()` is a function that converts a style object into a string of class names (`string`). Where the `classStyle` prop cannot be used (for example, when passing class names to external libraries).

### Example [#example-1]

```ts
import * as css from '@plumeria/core';

const styles = css.create({
  text: { fontSize: '16px' }
});

// Get the class name as a string
const className = css.use(styles.text);

// Apply to an external component
<ExternalComponent className={css.use(styles.text)} />
```

<Callout title="Build time compiles">
  `classStyle` and `css.use()` are both processed by the plugin at build time. There is zero runtime overhead, and the final bundle will only contain the class name as a string.
</Callout>