styled-jsx v5.0.0 Release Notes
-
๐ Features
- ๐ Introduce contextual styles (#744)
- Opt-in react 18 insertion effect hook when available (#753)
- ๐ป Fallback to module level registry in browser (#768)
๐ Improvements
- ๐ Make JSXStyle return a noop if the registry context is not provided (#749)
- ๐ Fix typings of
nonce
property - Pre-compile dependencies to reduce install size/time (#770)
๐ฅ BREAKING CHANGES
APIs
- ๐
styled-jsx/server
import path is deprecated - ๐
flush
andflushToHTML
fromstyled-jsx/server
APIs are deprecated - ๐ New component
<StyledRegistry>
is introduced - ๐ New APIs
useStyleRegistry
andcreateStyleRegistry
are introduced
Usage
๐ If you're only using styled-jsx purely client side, nothing will effect you. ๐ If you're using styled-jsx inside Next.js without customization, Next.js will automatically handle the changes for you.
๐ If you have your own customization with styled-jsx in Next.js, for example you have a custom
_document
: ๐ By default, doing this will let Next.js collect styles and pass them down.class Document extends React.Component { static async getInitialProps(ctx) { return await ctx.defaultGetInitialProps(ctx) } }
๐ง Or for instance you're passing
nonce
property ingetInitialProps
of_document
, this will let you configure it:class Document extends React.Component { static async getInitialProps(ctx) { - return await ctx.defaultGetInitialProps(ctx) + return await ctx.defaultGetInitialProps(ctx, { nonce }) } }
If you're building the SSR solution yourself with other frameworks, please checkout the Server-Side Rendering section in readme.