Style elements inline in JSX via the style prop, without any wrapping. No (mandatory) "presentational components" or StyleSheet.

style prop allows for compatibility with react-primitives, React Native components and many 3rd party components. The Primitives (View, Text, Image...) are designed to work cross-platform (web, Android, iOS...) and they provide convenient defaults for Flexbox based layout.

I want to add these elements in JSX, style them inline and only name and extract them to separate component when it becomes necessary, not upfront. Extracting to a named component can be as simple as adding const Wrapper = () => before the JSX element. No new syntax for creating a component.