---
title: emotion
description: Defined in: emotion.ts:30 Shared sink for Emotion compat modules on one registry. Defined in: emotion.ts:56 Emotion-shaped authoring API bound to one...
url: https://docs-v3-preview.elastic.dev/distillate/reference/api/emotion
---

# emotion
## Interfaces


### CreateEmotionOptions

Defined in: [emotion.ts:30](https://github.com/elastic/distillate/blob/d1dccb0eb5372d5984331c21603220340752a304/src/emotion.ts#L30)
Shared sink for Emotion compat modules on one registry.

#### Properties


| Property | Type                                                       | Description                                                                                        | Defined in                                                                                                              |
|----------|------------------------------------------------------------|----------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------|
| `sink?`  | [`StyleSink`](/distillate/reference/api/index-1#stylesink) | Notified when a compat module registers. Shared across `createEmotion` calls on the same registry. | [emotion.ts:32](https://github.com/elastic/distillate/blob/d1dccb0eb5372d5984331c21603220340752a304/src/emotion.ts#L32) |

---


### Emotion

Defined in: [emotion.ts:56](https://github.com/elastic/distillate/blob/d1dccb0eb5372d5984331c21603220340752a304/src/emotion.ts#L56)
Emotion-shaped authoring API bound to one Distillery registry.

#### Methods


##### css()

```ts
css(strings, ...values): EmotionCss;
```

Defined in: [emotion.ts:58](https://github.com/elastic/distillate/blob/d1dccb0eb5372d5984331c21603220340752a304/src/emotion.ts#L58)
Authors styles and returns a handle that can be used directly or passed to `cx`.

###### Parameters


| Parameter   | Type                   |
|-------------|------------------------|
| `strings`   | `TemplateStringsArray` |
| ...`values` | readonly `unknown`[]   |


###### Returns

[`EmotionCss`](#emotioncss-1)

##### cx()

```ts
cx(...args): string;
```

Defined in: [emotion.ts:60](https://github.com/elastic/distillate/blob/d1dccb0eb5372d5984331c21603220340752a304/src/emotion.ts#L60)
Combines handles, conditional classes, and plain strings into a space-separated string.

###### Parameters


| Parameter | Type                                       |
|-----------|--------------------------------------------|
| ...`args` | readonly [`ClassNameArg`](#classnamearg)[] |


###### Returns

`string`

##### globalModules()

```ts
globalModules(): readonly StylesModule<StylesObject>[];
```

Defined in: [emotion.ts:69](https://github.com/elastic/distillate/blob/d1dccb0eb5372d5984331c21603220340752a304/src/emotion.ts#L69)
Returns the underlying modules backing `injectGlobal` calls.

###### Returns

readonly [`StylesModule`](/distillate/reference/api/index-1#stylesmodule)<[`StylesObject`](/distillate/reference/api/index-1#stylesobject)>[]

##### injectGlobal()

```ts
injectGlobal(strings, ...values): void;
```

Defined in: [emotion.ts:62](https://github.com/elastic/distillate/blob/d1dccb0eb5372d5984331c21603220340752a304/src/emotion.ts#L62)
Defines styles that apply globally (e.g. `body`, `html`).

###### Parameters


| Parameter   | Type                   |
|-------------|------------------------|
| `strings`   | `TemplateStringsArray` |
| ...`values` | readonly `unknown`[]   |


###### Returns

`void`

##### stylesheet()

```ts
stylesheet(): string;
```

Defined in: [emotion.ts:67](https://github.com/elastic/distillate/blob/d1dccb0eb5372d5984331c21603220340752a304/src/emotion.ts#L67)
Emits the full CSS for all generated emotion styles.

###### Returns

`string`
---


### EmotionCss

Defined in: [emotion.ts:36](https://github.com/elastic/distillate/blob/d1dccb0eb5372d5984331c21603220340752a304/src/emotion.ts#L36)
Style handle that stringifies to its readable class name.

#### Extends

- [`StyleHandle`](/distillate/reference/api/index-1#stylehandle)


#### Properties


| Property       | Modifier   | Type                                                             | Description                                                                                                           | Inherited from                                                                                                                    | Defined in                                                                                                                          |
|----------------|------------|------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------|
| `declarations` | `readonly` | [`Declarations`](/distillate/reference/api/index-1#declarations) | CSS properties for this handle.                                                                                       | [`StyleHandle`](/distillate/reference/api/index-1#stylehandle).[`declarations`](/distillate/reference/api/index-1#declarations-1) | [styles/types.ts:117](https://github.com/elastic/distillate/blob/d1dccb0eb5372d5984331c21603220340752a304/src/styles/types.ts#L117) |
| `key`          | `readonly` | `string`                                                         | Full path joined by dots.                                                                                             | [`StyleHandle`](/distillate/reference/api/index-1#stylehandle).[`key`](/distillate/reference/api/index-1#key-1)                   | [styles/types.ts:113](https://github.com/elastic/distillate/blob/d1dccb0eb5372d5984331c21603220340752a304/src/styles/types.ts#L113) |
| `kind`         | `readonly` | `"handle"`                                                       | Discriminant for [StyleEntry](/distillate/reference/api/index-1#styleentry).                                          | [`StyleHandle`](/distillate/reference/api/index-1#stylehandle).[`kind`](/distillate/reference/api/index-1#kind)                   | [styles/types.ts:107](https://github.com/elastic/distillate/blob/d1dccb0eb5372d5984331c21603220340752a304/src/styles/types.ts#L107) |
| `localName`    | `readonly` | `string`                                                         | Leaf key if at root, or composed path for nested handles.                                                             | [`StyleHandle`](/distillate/reference/api/index-1#stylehandle).[`localName`](/distillate/reference/api/index-1#localname)         | [styles/types.ts:111](https://github.com/elastic/distillate/blob/d1dccb0eb5372d5984331c21603220340752a304/src/styles/types.ts#L111) |
| `moduleName`   | `readonly` | `string`                                                         | The registered module name this handle belongs to.                                                                    | [`StyleHandle`](/distillate/reference/api/index-1#stylehandle).[`moduleName`](/distillate/reference/api/index-1#modulename)       | [styles/types.ts:109](https://github.com/elastic/distillate/blob/d1dccb0eb5372d5984331c21603220340752a304/src/styles/types.ts#L109) |
| `readableName` | `readonly` | `string`                                                         | Predictable name used for output CSS classes.                                                                         | [`StyleHandle`](/distillate/reference/api/index-1#stylehandle).[`readableName`](/distillate/reference/api/index-1#readablename)   | [styles/types.ts:115](https://github.com/elastic/distillate/blob/d1dccb0eb5372d5984331c21603220340752a304/src/styles/types.ts#L115) |
| `variant`      | `readonly` | `boolean`                                                        | `true` when produced inside `variants(...)`. Skipped by [StylesCollector.use](/distillate/reference/api/index-1#use). | [`StyleHandle`](/distillate/reference/api/index-1#stylehandle).[`variant`](/distillate/reference/api/index-1#variant)             | [styles/types.ts:119](https://github.com/elastic/distillate/blob/d1dccb0eb5372d5984331c21603220340752a304/src/styles/types.ts#L119) |


#### Methods


##### [toPrimitive]()

```ts
toPrimitive: string;
```

Defined in: [emotion.ts:40](https://github.com/elastic/distillate/blob/d1dccb0eb5372d5984331c21603220340752a304/src/emotion.ts#L40)
Template interpolation; same as [EmotionCss.toString](#tostring).

###### Parameters


| Parameter | Type     |
|-----------|----------|
| `hint`    | `string` |


###### Returns

`string`

##### resolveClassName()

```ts
resolveClassName(context): string;
```

Defined in: [styles/types.ts:121](https://github.com/elastic/distillate/blob/d1dccb0eb5372d5984331c21603220340752a304/src/styles/types.ts#L121)
Produces the final class name via the provided resolver context.

###### Parameters


| Parameter                  | Type                                                | Description                                         |
|----------------------------|-----------------------------------------------------|-----------------------------------------------------|
| `context`                  | { `resolveClassName`: (...`handles`) => `string`; } | -                                                   |
| `context.resolveClassName` | (...`handles`) => `string`                          | Joins one or more handles into a class-name string. |


###### Returns

`string`

###### Inherited from

[`StyleHandle`](/distillate/reference/api/index-1#stylehandle).[`resolveClassName`](/distillate/reference/api/index-1#resolveclassname-1)

##### toString()

```ts
toString(): string;
```

Defined in: [emotion.ts:38](https://github.com/elastic/distillate/blob/d1dccb0eb5372d5984331c21603220340752a304/src/emotion.ts#L38)
Stringifies to the readable class name.

###### Returns

`string`

## Type Aliases


### ClassNameArg

```ts
type ClassNameArg = 
  | string
  | number
  | false
  | null
  | undefined
  | EmotionCss
  | StyleHandle
  | ClassNameArg[]
  | {
[className: string]: boolean;
};
```

Defined in: [emotion.ts:44](https://github.com/elastic/distillate/blob/d1dccb0eb5372d5984331c21603220340752a304/src/emotion.ts#L44)
One `cx(...)` argument: a class, handle, list, or truthy map.

## Functions


### createEmotion()

```ts
function createEmotion<TTokens>(distillery, options?): Emotion;
```

Defined in: [emotion.ts:114](https://github.com/elastic/distillate/blob/d1dccb0eb5372d5984331c21603220340752a304/src/emotion.ts#L114)
`@emotion/css`-shaped API over a distillery.
`String(css\`...`)`is the readable class name and does not collect. Passing the wrapper through`resolveClassName` collects and compacts like a native handle.

#### Type Parameters


| Type Parameter |
|----------------|
| `TTokens`      |


#### Parameters


| Parameter    | Type                                                                    | Description                                         |
|--------------|-------------------------------------------------------------------------|-----------------------------------------------------|
| `distillery` | [`Distillery`](/distillate/reference/api/index-1#distillery)<`TTokens`> | Bound distillery that owns the underlying registry. |
| `options`    | [`CreateEmotionOptions`](#createemotionoptions)                         | Optional sink for DOM injection.                    |


#### Returns

[`Emotion`](#emotion)

## References


### createDomSink

Re-exports [createDomSink](/distillate/reference/api/index-1#createdomsink)
---


### CreateDomSinkOptions

Re-exports [CreateDomSinkOptions](/distillate/reference/api/index-1#createdomsinkoptions)
---


### DocumentLike

Re-exports [DocumentLike](/distillate/reference/api/index-1#documentlike)
---


### StyleElementLike

Re-exports [StyleElementLike](/distillate/reference/api/index-1#styleelementlike)
---


### StyleParentLike

Re-exports [StyleParentLike](/distillate/reference/api/index-1#styleparentlike)
---


### StyleSink

Re-exports [StyleSink](/distillate/reference/api/index-1#stylesink)