ThemeSwitcherProvider is not working at Next.js

DonRyu commented 1 year ago

import React from 'react';
import App from 'next/app';
import Head from 'next/head';
import {Provider} from 'react-redux';
import withRedux from 'next-redux-wrapper';
import ThemeProvider from '../containers/ThemeProvider';
import initStore from '../redux/store';
import '@glidejs/glide/dist/css/glide.core.min.css';
import 'react-quill/dist/quill.snow.css';
import 'react-quill/dist/quill.core.css';
import '../style/global.css';
import 'react-image-crop/dist/ReactCrop.css'
import { ThemeSwitcherProvider } from 'react-css-theme-switcher';

const themes = {
  light: 'antd/dist/antd.css',
  dark: 'antd/dist/antd.dark.css',
};

class CustomApp extends App {
  render() {
    const {Component, pageProps, store, router} = this.props;
    let component = <Component {...pageProps} />;
    return (
      <ThemeSwitcherProvider defaultTheme="light" themeMap={themes}>
        <Provider store={store}>
          <ThemeProvider>
            <Head>
              <title>KTX Admin</title>
            </Head>
            {component}
          </ThemeProvider>
        </Provider>
      </ThemeSwitcherProvider>
    );
  }
}

export default withRedux(initStore)(CustomApp);

"antd": "^4.18.8", "next": "^11.1.2", "react": "^17.0.2", react-css-theme-switcher:0.3.0

I try to change different antd.css file at Next.js But ThemeSwitcherProvider is not working....

henriquezolini commented 1 year ago

You can add this normal browser head tag to the beginning of your document BEFORE your NextJS Head tag, and the Head tag will append all of it's content to your comment.


export default function Document() {
  return (
    <Html lang="en">
      <head dangerouslySetInnerHTML={{ __html: '<!--styles-insertion-point-->' }}>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

ThomasAunvik commented 4 months ago

Tested it on app router, but it recieves the fhe following warning: What was showed above probably works for pages router.

Warning: Prop `dangerouslySetInnerHTML` did not match. Server: "<!--styles-insertion-point--><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><link rel=\"stylesheet\" href=\"/_next/static/css/app/layout.css?v=1714466852325\" data-precedence=\"next_static/css/app/layout.css\"><link rel=\"preload\" as=\"script\" fetchpriority=\"low\" href=\"/_next/static/chunks/webpack.js?v=1714466852325\"><script src=\"/_next/static/chunks/main-app.js?v=1714466852325\" async=\"\"></script><script src=\"/_next/static/chunks/app-pages-internals.js\" async=\"\"></script><script src=\"/_next/static/chunks/app/layout.js\" async=\"\"></script><script src=\"/_next/static/chunks/app/not-found.js\" async=\"\"></script><script src=\"/_next/static/chunks/app/(main)/layout.js\" async=\"\"></script><title>titletext</title><meta name=\"description\" content=\"descriptiontext\"><link rel=\"icon\" href=\"/favicon.ico\" type=\"image/x-icon\" sizes=\"16x16\"><meta name=\"next-size-adjust\"><script src=\"/_next/static/chunks/polyfills.js\" nomodule=\"\"></script><link rel=\"preload\" href=\"/_next/static/media/c9a5bc6a7c948fb0-s.p.woff2\" as=\"font\" crossorigin=\"\" type=\"font/woff2\"><style id=\"_goober\"> @keyframes go2264125279{from{transform:scale(0) rotate(45deg);opacity:0;}to{transform:scale(1) rotate(45deg);opacity:1;}}@keyframes go3020080000{from{transform:scale(0);opacity:0;}to{transform:scale(1);opacity:1;}}@keyframes go463499852{from{transform:scale(0) rotate(90deg);opacity:0;}to{transform:scale(1) rotate(90deg);opacity:1;}}@keyframes go1268368563{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}@keyframes go1310225428{from{transform:scale(0) rotate(45deg);opacity:0;}to{transform:scale(1) rotate(45deg);opacity:1;}}@keyframes go651618207{0%{height:0;width:0;opacity:0;}40%{height:0;width:6px;opacity:1;}100%{opacity:1;height:10px;}}@keyframes go901347462{from{transform:scale(0.6);opacity:0.4;}to{transform:scale(1);opacity:1;}}.go4109123758{z-index:9999;}.go4109123758 > *{pointer-events:auto;}</style>" Client: "<!--styles-insertion-point-->"
head
html
RootLayout (Server)
RedirectErrorBoundary@webpack-internal:///(app-pages-browser)/../../node_modules/next/dist/client/components/redirect-boundary.js:74:9
RedirectBoundary@webpack-internal:///(app-pages-browser)/../../node_modules/next/dist/client/components/redirect-boundary.js:82:24
NotFoundErrorBoundary@webpack-internal:///(app-pages-browser)/../../node_modules/next/dist/client/components/not-found-boundary.js:76:9
NotFoundBoundary@webpack-internal:///(app-pages-browser)/../../node_modules/next/dist/client/components/not-found-boundary.js:84:62
DevRootNotFoundBoundary@webpack-internal:///(app-pages-browser)/../../node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:24
ReactDevOverlay@webpack-internal:///(app-pages-browser)/../../node_modules/next/dist/client/components/react-dev-overlay/app/ReactDevOverlay.js:87:9
HotReload@webpack-internal:///(app-pages-browser)/../../node_modules/next/dist/client/components/react-dev-overlay/app/hot-reloader-client.js:321:37
Router@webpack-internal:///(app-pages-browser)/../../node_modules/next/dist/client/components/app-router.js:207:134
ErrorBoundaryHandler@webpack-internal:///(app-pages-browser)/../../node_modules/next/dist/client/components/error-boundary.js:113:9
ErrorBoundary@webpack-internal:///(app-pages-browser)/../../node_modules/next/dist/client/components/error-boundary.js:160:67
AppRouter@webpack-internal:///(app-pages-browser)/../../node_modules/next/dist/client/components/app-router.js:577:47
ServerRoot@webpack-internal:///(app-pages-browser)/../../node_modules/next/dist/client/app-index.js:112:27
Root@webpack-internal:///(app-pages-browser)/../../node_modules/next/dist/client/app-index.js:117:24

JoseRFelix / react-css-theme-switcher

ThemeSwitcherProvider is not working at Next.js #51