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: