renderToPipeableStream compatible solution

https://ant.design/docs/react/customize-theme#server-side-render-ssr currently suggests using renderToString - and for good reason. It requires the entire page to be rendered to correctly extract the CSS.

renderToPipeableStream means there are pieces of the page incrementally streaming. Therefore, the styles needed must suspend to stream as well - otherwise you're stuck waiting for the entire page to load to stream the extractStyle (which causes a flash of unstyled content), or if you put it too early you miss some of the css entirely.

Instead of extractStyles, you could have a component called `Styles` that you render in your renderToPipeableStream

```tsx
function Document({children}) {
return (




{title}

);
}
```

The key to making a suspending component work correctly is the https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore api as this will still cause "re-renders" during SSR streaming.

Start by reading the SSR guidance at ant.design/docs/react/customize-theme#server-side-render-ssr and the issue's proposed Styles component and useSyncExternalStore approach. Done means cssinjs supports renderToPipeableStream without waiting for the full page or missing streamed styles, while avoiding a flash of unstyled content.

Written by the indexing model from the issue text.