Overriding Styles (sx)

gluestack-style supports the sx prop for overriding styles.The sx prop enables passing an object supporting tokens, media queries, nesting, and token-aware values to the component.
sx accepts the same style object as the base style.
"marginBottom": '$4',
"bg": 'pink',
":hover": {
"bg": 'orange',
In this example, the button has a pink background instead of the default primary color, as the backgroundColor style is overridden using the sx prop
The sx prop is particularly useful for theming and responsive styles, as it enables easy style changes for a component based on the theme or viewport size
It is important to note that you should generally avoid using the sx prop, as it adds complexity to style calculations and may decrease performance
Edit this page on GitHub