​
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:
TokenDescription
--bolt-input-fontFamilyFont family for input fields
--bolt-input-fontSizeFont size for input fields
--bolt-input-borderRadiusBorder radius for input fields
--bolt-input-borderColorDefault border color for input fields
--bolt-input_focus-borderColorBorder color when an input field is focused
--bolt-input-backgroundColorBackground color for input fields