# Styling Components

> Customize the look and feel of Bolt React Native SDK components using CSS custom properties.

Source: https://help.boltapp.com/developers/sdks/react-native/styling

## Overview [#overview]

The Bolt React Native SDK supports styling through **v3 CSS custom properties** using the `--bolt-{target}-{property}` format. You can apply styles globally to all components or on a per-element basis.

For the full list of available style tokens, see [Bolt Styling Docs: Style Components v3](https://help.boltapp.com/products/checkout/embeddable-checkout/api-implementation/styling/style-components-v3/).

## Global Styles [#global-styles]

Use `bolt.configureOnPageStyles()` to set styles that apply to **all** Bolt elements rendered in your app:

```typescript title="TypeScript"
bolt.configureOnPageStyles({
  '--bolt-input-fontFamily': 'Inter, sans-serif',
  '--bolt-input-fontSize': '16px',
  '--bolt-input-borderRadius': '8px',
});
```

## Per-Element Styles [#per-element-styles]

Pass a `styles` object when creating a controller to apply styles to a specific element:

```typescript title="TypeScript"
const cc = CreditCard.useController({
  styles: {
    '--bolt-input-borderColor': '#ccc',
    '--bolt-input_focus-borderColor': '#5A31F4',
  },
});
```

## Updating Styles After Creation [#updating-styles-after-creation]

You can update styles on a controller at any time using `setStyles()`:

```typescript title="TypeScript"
cc.setStyles({
  '--bolt-input-backgroundColor': '#f9f9f9',
});
```

## Style Token Format [#style-token-format]

All style tokens follow the pattern:

```text title="Token pattern"
--bolt-{target}-{property}
--bolt-{target}_{state}-{property}
```

**Examples:**

| Token                            | Description                                 |
| -------------------------------- | ------------------------------------------- |
| `--bolt-input-fontFamily`        | Font family for input fields                |
| `--bolt-input-fontSize`          | Font size for input fields                  |
| `--bolt-input-borderRadius`      | Border radius for input fields              |
| `--bolt-input-borderColor`       | Default border color for input fields       |
| `--bolt-input_focus-borderColor` | Border color when an input field is focused |
| `--bolt-input-backgroundColor`   | Background color for input fields           |