Descendants

We can provide context based descendant styling with the help of gluestack-ui, i.e we can apply styles to the children of a component from the parent component.

In the below example we are applying styles to ButtonText by passing styles _text property in the sx prop of Button component.

<Box justifyContent="center" alignItems="center" h="100%">
  <Box alignItems="center">
    <Button sx={{ _text: { color: "red" } }}>
      <ButtonText>Button</ButtonText>
    </Button>
  </Box>
</Box>

Expo snack link for the above example is provided here.

Edit this page on GitHub