How to use CSS-in-JS libraries

It's possible to use any existing CSS-in-JS solution. The simplest one is inline styles:

functionHiThere() {return <pstyle={{ color:'red' }}>hi there</p>}exportdefault HiThere

We bundlestyled-jsx to provide support for isolated scoped CSS.The aim is to support "shadow CSS" similar to Web Components, which unfortunatelydo not support server-rendering and are JS-only.

See the above examples for other popular CSS-in-JS solutions (like Styled Components).

A component usingstyled-jsx looks like this:

functionHelloWorld() {return (    <div>      Hello world      <p>scoped!</p>      <stylejsx>{`        p {          color: blue;        }        div {          background: red;        }        @media (max-width: 600px) {          div {            background: blue;          }        }      `}</style>      <styleglobaljsx>{`        body {          background: black;        }      `}</style>    </div>  )}exportdefault HelloWorld

Please see thestyled-jsx documentation for more examples.

Disabling JavaScript

Yes, if you disable JavaScript the CSS will still be loaded in the production build (next start). During development, we require JavaScript to be enabled to provide the best developer experience withFast Refresh.