Styling Components

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.

Global Styles

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

bolt.configureOnPageStyles({
  '--bolt-input-fontFamily': 'Inter, sans-serif',
  '--bolt-input-fontSize': '16px',
  '--bolt-input-borderRadius': '8px',
});

Per-Element Styles

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

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

Updating Styles After Creation

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

cc.setStyles({
  '--bolt-input-backgroundColor': '#f9f9f9',
});

Style Token Format

All style tokens follow the 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

Getting started

Products

SDKs

Platforms

Integration guides

Gaming

Merchant dashboard

Shoppers

Styling Components

Overview

Global Styles

Per-Element Styles

Updating Styles After Creation

Style Token Format

​Overview

​Global Styles

​Per-Element Styles

​Updating Styles After Creation

​Style Token Format

Overview

Global Styles

Per-Element Styles

Updating Styles After Creation

Style Token Format