What is the priority order for nested component style overrides in extendTheme?

In Chakra UI, when using `extendTheme`, the resolution of component styles follows a specific inheritance hierarchy. When multiple definitions target the same CSS property, the later definition in the merge chain overrides the lower-priority one.

The Priority Hierarchy

The order of precedence, from **lowest to highest**, is as follows:

1. Global Styles: Defined in the `globalStyles` object.
2. Base Style: The default styles applied to all instances of a component.
Variants: Specific styles defined under a variant (e.g., 'solid', 'outline') triggered by the variant={...quot} prop.
3. Inline Style Props: Props passed directly to the React element (e.g., <Button bg="red">).

Base Style vs. Variant Resolution

If a baseStyle and a variant overlap on the same CSS property, the variant takes precedence. This is because the Chakra theme engine first merges the base styles into the component and then merges the specific variant styles on top of that result.

Inline Props vs. Theme Definitions

The component-level style prop (inline prop) always overrides the theme's variant definition, regardless of the property's CSS specificity. This occurs because inline props are applied during the final stage of the component rendering process after all theme-based styles have been computed.

Example Resolution Logic

const theme = extendTheme({
  components: {
    Button: {
      baseStyle: { fontSize: 4, bg: 'gray' },
      variants: {
        brand: { bg: 'blue' } // Overrides 'gray'
      }
    }
  }
});

// Result: 
// <Button variant="brand"> → bg is blue
// <Button variant="brand" bg="green"> → bg is green (Inline wins)

Note: This behavior assumes you are using standard Chakra UI component patterns. If you are using custom components with manual mergeStyles calls, the order may vary based on your implementation.