modify styleprovider so its cache can be safely removed on load

web/pages/_document.tsx

@@ -34,7 +34,6 @@ const Doc = () => (
   </Html>
 );
 
-
 /*
 
 Yoinked from https://ant.design/docs/react/use-with-next#using-pages-router. Change if someone figures out a way to
@@ -47,7 +46,8 @@ Doc.getInitialProps = async (ctx: DocumentContext) => {
   ctx.renderPage = () =>
     originalRenderPage({
       enhanceApp: App => props => (
-        <StyleProvider cache={cache}>
+        // layer forces antd to generate new css so that the cache can be safely removed
+        <StyleProvider cache={cache} layer autoClear>
           <App {...props} />
         </StyleProvider>
       ),
@@ -60,7 +60,7 @@ Doc.getInitialProps = async (ctx: DocumentContext) => {
     styles: (
       <>
         {initialProps.styles}
-        <style dangerouslySetInnerHTML={{ __html: style }} />
+        <style id="antd-init-cache" dangerouslySetInnerHTML={{ __html: style }} />
       </>
     ),
   };