问使用useMediaQuery钩子切换光/暗主题时被覆盖的材质-用户界面风格
EN

Stack Overflow用户

提问于 2021-08-04 06:52:31

回答 1查看 565关注 0票数 0

我使用next.js和material，并根据用户喜好更改主题。但是当切换到光模式时，我设置的样式(使用JSS)将被覆盖，只有在使用光模式时才会发生这种情况--我甚至试图逆转这两个主题，但是它不起作用。经过大量的尝试，我发现当更改系统/浏览器以使用与useMediaQuery()挂钩中的主题不同的主题时，就会出现问题。const isInDarkMode = useMediaQuery("(prefers-color-scheme: dark)"); (例如，当设置为更喜欢的颜色方案时，光线主题将导致样式被覆盖。)但我还是不知道为什么会这样，也不知道如何避免。

编辑：手动设置isInDarkMode = false之后，不管模式是什么，样式都会被覆盖。所以也许useMediaQuery并没有造成这个问题，但实际上解决了这个问题。

编辑在我尝试将这个应用程序部署到vercel之后，主页在所有颜色模式下都是完全正常的，getStaticPaths()生成的一些页面仍然存在问题。

这在iOS上的Safari上和Windows上的Chrome上都进行了测试，而且所有的问题都会发生。

用于设置主题的代码(在_app.js中设置)：

import Header from "../components/Header";
import React from "react";
import useMediaQuery from "@material-ui/core/useMediaQuery";
import { createTheme, ThemeProvider } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";
import "../styles/global.css";

function MyApp({ Component, pageProps }) {
  const isInDarkMode = useMediaQuery("(prefers-color-scheme: dark)");

  const theme = React.useMemo(
    () =>
      createTheme({
        spacing: 8,

        palette: {
          type: isInDarkMode ? "dark" : "light",
          primary: {
            main: isInDarkMode ? "#8A6BBE" : "#6F3381",
          },
          secondary: {
            main: "#CB4042",
          },
          background: {
            default: isInDarkMode ? "#1c1c1c" : "#fffffb",
          },
        },

        typography: {
          h3: {
            fontFamily: "Source Serif Pro, serif",
            fontWeight: "600",
            fontSize: "2.2rem",
            "@media (min-width:600px)": {
              fontSize: "3rem",
            },
          },
        },
      }),
    [isInDarkMode]
  );

  return (
    <>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Header isInDarkMode={isInDarkMode} />
        <Component {...pageProps} />
      </ThemeProvider>
    </>
  );
}

export default MyApp;

(我在没有useMemo的情况下尝试过，但没有解决问题。)

const useStyles = makeStyles({
  root: {
    maxWidth: 345,
    backgroundColor: "rgba(255, 255, 255, 0)",
    border: "1px solid rgba(138, 107, 190, 0.7)",
    borderRadius: "8px",
  },
});

(就样式而言，问题将导致覆盖所有样式，包括maxWidth、BackgroundColor和边框/边框半径)

jss

javascript

reactjs

material-ui

next.js

TDSQL-CMySQL免费体验

云原生数据库TDSQL-C MySQL 2核4G 免费体验15天

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-08-05 22:12:47

问题解决了！这似乎是因为没有删除服务器端的CSS。我遵循了这里教程

供参考，这是我的_document.js

import React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";
import { ServerStyleSheets } from "@material-ui/core/styles";

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head></Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with server-side generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
  // Resolution order
  //
  // On the server:
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. document.getInitialProps
  // 4. app.render
  // 5. page.render
  // 6. document.render
  //
  // On the server with error:
  // 1. document.getInitialProps
  // 2. app.render
  // 3. page.render
  // 4. document.render
  //
  // On the client
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. app.render
  // 4. page.render

  // Render app and page and get the context of the page with collected side effects.
  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
    });

  const initialProps = await Document.getInitialProps(ctx);

  return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: [
      ...React.Children.toArray(initialProps.styles),
      sheets.getStyleElement(),
    ],
  };
};

和_app.js

import Header from "../components/Header";
import React from "react";
import useMediaQuery from "@material-ui/core/useMediaQuery";
import { createTheme, ThemeProvider } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";

import { lightTheme, darkTheme } from "../utils/themes/Theme";
import "../styles/global.css";

function MyApp({ Component, pageProps }) {
  const isInDarkMode = useMediaQuery("(prefers-color-scheme: dark)");

  React.useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector("#jss-server-side");
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);

  return (
    <ThemeProvider theme={isInDarkMode ? darkTheme : lightTheme}>
      <CssBaseline />
      <Header isInDarkMode={isInDarkMode} />
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;