jsxstyle

Inline styles for JSX—React, Preact, Solid, and Astro
jsxstyle is an inline style system for JSX.
Styles are written inline on a special set of components exported by jsxstyle. Inline styles on these components are converted to CSS rules and added to the document right as they’re needed.
With jsxstyle, your component code looks like this:
<Row padding={15} gap={15}>
<Block
component="img"
src="url(http://graph.facebook.com/justinbieber/picture?type=large)"
borderRadius={5}
height={64}
width={64}
/>
<Col fontFamily="system-ui" fontSize={16} lineHeight="24px">
<Block fontWeight={600}>Justin Bieber</Block>
<Block fontStyle="italic">Canadian</Block>
</Col>
</Row>
Getting started
Install the jsxstyle package with your preferred node package manager.