States

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.

<Button
  sx={{
    ":hover": {
      backgroundColor: "$red500",
    },
  }}
>
  <ButtonText>Hello world</ButtonText>
</Button>

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.