Descendant Styles (Context based)

Descendant styles can be defined in the componentStyleConfig object, inside the component name prop starting with an underscore. This allows styles to be passed down to children using context-based styling. This approach allows for the global styling of a component to be managed in a centralized location, rather than having to pass down props.

You can create any key in the descendants object and pass a style as a value. To use this, specify the created key in the descendantStyle array, which is defined in the component config and passed as the third parameter in the styled function

function App() {
  const StyledButton = styled(
    Pressable,
    {
      bg: "$primary600",
      px: "$6",
      py: "$4",
      _text: {
        color: "$white",
      },
    },
    {
      descendantStyle: ["_text"],
    }
  )
  const StyledButtonText = styled(
    Text,
    {
      color: "$grey800",
      fontWeight: "700",
    },
    { ancestorStyle: ["_text"] }
  )
  return (
    <Provider config={config}>
      <StyledButton bg="$primary600">
        <StyledButtonText>Hello world</StyledButtonText>
      </StyledButton>
    </Provider>
  )
}

To apply the passed style to a child component, specify the key in the ancestor styles array of the component config when creating the component.

const StyledButtonText = styled(
  Text,
  {
    color: "$grey800",
    fontWeight: "700",
  },
  { ancestorStyle: ["_text"] }
)

These styles will be automatically applied to children.

Edit this page on GitHub