Merge pull request #32672 from elliottsj/next-document-styles-array

[next] Use an array of React nodes for Document.getInitialProps().styles

types/next/document.d.ts

@@ -37,7 +37,7 @@ export interface NextDocumentContext<Q extends DefaultQuery = DefaultQuery> exte
  * https://github.com/zeit/next.js/blob/7.0.0/server/document.js#L16
  */
 export interface DefaultDocumentIProps extends RenderPageResponse {
-    styles?: React.ReactNode;
+    styles?: React.ReactNode[];
 }
 
 /**

types/next/test/next-document-tests.tsx

@@ -35,7 +35,9 @@ class MyDocumentDefault extends Document {
 }
 
 class MyDoc extends Document<WithUrlProps> {
-    static getInitialProps({ req, renderPage }: NextDocumentContext) {
+    static async getInitialProps(ctx: NextDocumentContext) {
+        const { req, renderPage } = ctx;
+
         // without callback
         const _page = renderPage();
 
@@ -43,7 +45,9 @@ class MyDoc extends Document<WithUrlProps> {
         const enhancer: Enhancer<PageProps, {}> = App => props => <App />;
         const { html, head, buildManifest } = renderPage(enhancer);
 
-        const styles = [<style />];
+        const initialProps = await Document.getInitialProps(ctx);
+
+        const styles = [...(initialProps.styles ? initialProps.styles : []), <style />];
 
         // Custom prop
         const url = req!.url;