- Style elements inline in JSX via the
styleprop, without any wrapping. No (mandatory) "presentational components" or
styleprop allows for compatibility with
react-primitives, React Native components and many 3rd party components. The Primitives (
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.
- Support vendor prefixes, pseudo classes, media queries, CSS variables...
- Support things like
@media (-webkit-min-device-pixel-ratio: 2),
:hover, or `var(--panel-back