# Styling

Optional CSS, custom component props, and theme variables.

Canonical: https://reactmention.com/docs/recipes/styling



Import the default stylesheet once:

```tsx
import "@danielivanov/mention/styles.css";
```

The stylesheet targets `data-mention-popover`, `data-mention-item`, `data-mention-empty`, and `data-mention-loading`. Components also accept normal `className` and `style` props.

Default colors resolve through shadcn variables such as `--popover`, `--popover-foreground`, `--accent`, `--accent-foreground`, `--border`, and `--muted-foreground`. The library's private `--mention-*` variables are defined on `[data-mention-popover]`; override them at that selector when needed.

```css
[data-mention-popover] {
  --mention-item-bg-active: #e0e7ff;
  --mention-item-fg-active: #312e81;
}
```

Use `unstyled` on Root to omit the default styling data attributes, or omit the stylesheet entirely. ARIA attributes and event handling remain available.

The active option uses `aria-selected="true"`. Style that attribute so mouse and keyboard navigation share one visible state:

```css
.my-option[aria-selected="true"] {
  background: #e0e7ff;
  color: #312e81;
}
```

Set theme variables in your application's dark theme. Without application tokens, the default stylesheet uses `prefers-color-scheme` fallbacks. It also includes forced-colors rules for the active option.