<commit_before># Dynamic styles

Sometimes we have some styles based on component's props or state, or dynamic in some way. We can use various approaches to tackle this. Each with their own limitations.

## Inline styles

Inline styles are the most sraightforward way to use dynamic styles. Pass a `style` object with the dynamic styles, and you're done.

```js
import React from 'react';

export function Pager({ index, children }) {
  return (
    <div style={{ transform: `translateX(${index * 100}%)` }}>
      {children}
    </div>
  );
}
```

However, it's not possible to use inline styles with pseudo-selectors or media queries.

## CSS custom properties

[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) can be used to expose dynamic properties to the CSS.

```js
import React from 'react';
import { css, styles } from 'linaria';

const box = css`
  height: var(--box-size);
  width: var(--box-size);
`;<commit_msg>docs: fix DYNAMIC_STYLES doc typo (#102)<commit_after># Dynamic styles

Sometimes we have some styles based on component's props or state, or dynamic in some way. We can use various approaches to tackle this. Each with their own limitations.

## Inline styles

Inline styles are the most straightforward way to use dynamic styles. Pass a `style` object with the dynamic styles, and you're done.

```js
import React from 'react';

export function Pager({ index, children }) {
  return (
    <div style={{ transform: `translateX(${index * 100}%)` }}>
      {children}
    </div>
  );
}
```

However, it's not possible to use inline styles with pseudo-selectors or media queries.

## CSS custom properties

[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) can be used to expose dynamic properties to the CSS.

```js
import React from 'react';
import { css, styles } from 'linaria';

const box = css`
  height: var(--box-size);
  width: var(--box-size);
`;
{'fraction_non_alphanumeric': 0.1189245087900724, 'fraction_numerical': 0.004653567735263702, 'mean_word_length': 3.9615384615384617, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5793941', 'n_tokens_mistral': 585, 'n_tokens_neox': 557, 'n_words': 245}