- Style elements inline in JSX via the
style
prop, without any wrapping. No (mandatory) "presentational components" orStyleSheet
.
style
prop allows for compatibility withreact-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.
- Support vendor prefixes, pseudo classes, media queries, CSS variables...
- Support things like
@media (-webkit-min-device-pixel-ratio: 2)
,:hover
, or `var(--panel-back