<commit_before>---
id: styling-components
title: Styling Components
sidebar_label: Styling Components
---

We are using [emotion](https://emotion.sh) to style our components. For more details on how this works, please refer to emotion's documentation. We heavily use their [Styled Components](https://emotion.sh/docs/styled) approach, which allows you to extend our built-in components.

## Basic tags

For basic building blocks (views, texts, ...) you can use the styled object.

```javascript
import {styled} from 'flipper';

const MyView = styled('div')({
  fontSize: 10,
  color: colors.red
});
const MyText = styled('span')({ ... });
const MyImage = styled('img')({ ... });
const MyInput = styled('input')({ ... });
<commit_msg>Fixed missing code block container<commit_after>---
id: styling-components
title: Styling Components
sidebar_label: Styling Components
---

We are using [emotion](https://emotion.sh) to style our components. For more details on how this works, please refer to emotion's documentation. We heavily use their [Styled Components](https://emotion.sh/docs/styled) approach, which allows you to extend our built-in components.

## Basic tags

For basic building blocks (views, texts, ...) you can use the styled object.

```javascript
import {styled} from 'flipper';

const MyView = styled('div')({
  fontSize: 10,
  color: colors.red
});
const MyText = styled('span')({ ... });
const MyImage = styled('img')({ ... });
const MyInput = styled('input')({ ... });
```

{'fraction_non_alphanumeric': 0.1482226693494299, 'fraction_numerical': 0.0026827632461435278, 'mean_word_length': 4.405797101449275, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 4, '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': '2820230', 'n_tokens_mistral': 440, 'n_tokens_neox': 430, 'n_words': 162}