Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ThemeSwitcherProvider is not working at Next.js #51

Open
DonRyu opened this issue Nov 10, 2022 · 2 comments
Open

ThemeSwitcherProvider is not working at Next.js #51

DonRyu opened this issue Nov 10, 2022 · 2 comments

Comments

@DonRyu
Copy link

DonRyu commented Nov 10, 2022 

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
Copy link

henriquezolini commented May 12, 2023 •
edited
Loading

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@ThomasAunvik @henriquezolini @DonRyu