Styling of gluestack-ui components is achieved through the utilization of @gluestack-style/react, a resource that provides a range of capabilities for effectively controlling states like hover, active, focused, and others. You can pass config file from @gluestack-ui/config for default state styling. Config file exports an object which is passed inside the GluetackUIProvider. In this context, we will delve into how gluestack-style simplifies the management of these states and their associated styles.
Easiest way to change styling of states would be using sx prop which enables state management.
":hover": {
backgroundColor: "$red500",
<ButtonText>Hello world</ButtonText>

We can define styles that can be applied on different states and pass them as an object in sx prop. For more details, checkout State Based Styles documentation.

Supported States are

  • indeterminate
  • checked
  • readOnly
  • required
  • invalid
  • focus
  • focusVisible
  • hover
  • pressed
  • active
  • loading
  • disabled
Edit this page on GitHub