jsxstyle

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.