Style Parsing Priority

useSx accepts styles from multiple sources. When the same property is defined in more than one source, the following priority order determines which value wins.

const props = {
  style: { marginTop: 24 }, // #2
  sx: { mt: '24px' }, // #3
  mt: '24px', // #4
}

const { getStyle, filteredProps } = useSx(props, {
  transform: ({ /* ... */ }) => ({ mt: 4 }), // #1
  fallback: { mt: 8 }, // #5
});

return <View style={getStyle()} />

Priority (highest to lowest): 1 > 2 > 3 > 4 > 5

Priority	Source	Description
1	transform in useSx options	Computed values based on resolved props. Highest priority because it overrides user-facing props intentionally.
2	style prop	Plain React Native style prop. Higher than sx/token props for stability during incremental migration.
3	sx prop	Object of token-aware style properties.
4	Direct props	Token props passed directly (e.g. ml, color).
5	fallback in useSx options	Default values applied when no other source provides a value.

tip

If priority ordering is confusing, start with direct props (#4) and transform (#1) only. Add style (#2) and sx (#3) as needed during migration.