小编rou*_*cle的帖子

在我的 Next JS 网站上，我需要实现 Google Analytics (GA) 和 Facebook Pixel (FP)，我根据文档进行了操作，并且据我所知正在工作。现在，我需要使所有内容都符合 GDPR，以便只有在明确接受 cookie 后，这些服务才能发送信息。我不确定我是否以正确/最佳的方式做到了这一点，所以如果有人比我更有知识的人可以看看，我将不胜感激。我对弹出窗口使用了react-cookie-consent，它添加了一个带有布尔值的cookie，指示cookie是被接受还是被拒绝。通过以下代码，我想确保： 1. 第一次访问时，GA 和 FB 不会被激活，直到单击接受（请参阅handleAccept 函数）。2. 在随后的访问中，当用户之前接受了 cookie 时，GA 和 FB 将处于活动状态。这是我的 app.js：

import "../styles/globals.css";
import CookieConsent from "react-cookie-consent";
import * as gtag from "../lib/gtag";
import * as fbq from "../lib/fpixel";
import { useEffect } from "react";
import Script from "next/script";
import { useRouter } from "next/router";

function MyApp({ Component, pageProps }) {
  // for Google analytics and Facebook tracking
  const router = useRouter();
  useEffect(() => …

我正在使用react-slick（https://react-slick.neostack.com/）来制作我的博客的简单滑块组件。现在，我想简单地将position:relative和z-index:50设置为类slack-current（由Slider组件生成）的div，但找不到任何方法来做到这一点。我将 NextJS 与以下组件一起使用：

function Carousel({ blogs }) {
  const [imageIndex, setImageIndex] = useState(0);

  const transformDate = (date) => {
    return date.substring(0, 10);
  };

  const NextArrow = ({ onClick }) => {
    return (
      <div className={`${styles.arrow} ${styles.next}`} onClick={onClick}>
        <FaArrowRight />
      </div>
    );
  };

  const PrevArrow = ({ onClick }) => {
    return (
      <div className={`${styles.arrow} ${styles.prev}`} onClick={onClick}>
        <FaArrowLeft />
      </div>
    );
  };

  const settings = {
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: 3,
    slidesToScroll: 1,
    centerMode: true,
    nextArrow: …

目前我正在使用 SCSS，因为它很容易与 NextJS 一起使用。我真的很喜欢这个系统的工作方式，使用 SCSS 模块，所以我也想在使用 Material-UI 时使用它。Material-UI 使用 JSS，每次都要编写很多样板文件。此外，我不喜欢使用两种样式方式（SCSS 模块和 JSS）。我已经更改了 CSS 注入的顺序，以便我可以在 Material-UI 组件上使用我的 SCSS 模块。但是，我想知道是否有一种方法可以使用 SCSS 模块覆盖 Material-UI 组件的样式？我尝试过以下方法和一些类似的方法，但似乎没有任何效果：

import styles from "./Login.module.scss";

import Button from "@material-ui/core/Button";

function Login() {
  return (
    <section>
        <Button className={styles.button} variant="contained" color="primary">
          Verify
        </Button>
    </section>
  );
}

export default Login;

.button {
  padding: 10px;
  margin-bottom: 10px;
  .MuiButton-containedPrimary {
    border: 2px solid red;
    background-color: red;
  }
}

在 vscode 中，我想使用 Prettier 作为我的默认格式化程序，但不适用于 Python，我将只使用 autopep8。我现在有以下设置：

{
  "workbench.iconTheme": "vscode-icons",
  "workbench.editorAssociations": [
    {
      "viewType": "jupyter.notebook.ipynb",
      "filenamePattern": "*.ipynb"
    }
  ],
  "git.confirmSync": false,
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "python.formatting.provider": "autopep8",
  "explorer.confirmDelete": false,
  "python.showStartPage": false,
  "explorer.confirmDragAndDrop": false
}

当我保存一个 python 文件时，它给了我消息：“扩展'Pretier - 代码格式化程序无法格式化等......'。所以，显然它仍然使用错误的 python 文件格式化程序。我该如何更改？！

我正在将 Firebase 和 Next JS 用于 Web 应用程序，您必须登录才能访问任何其他页面（所有路由都受到保护）。我首先做的是在 _app.js 中设置一个提供程序，以便我可以访问用户的状态（登录或未登录）。然后，当请求受保护的页面时，我检查用户状态并在需要时重定向到登录页面，如下所示：

import Users from "../components/users/Users";
import Layout from "../components/general/Layout";

import { useEffect, useContext } from "react";
import { AuthContext } from "../components/authentication/auth";

import router from "next/router";

function users() {
  const { currentUser } = useContext(AuthContext);

  useEffect(() => {
    if (currentUser) {
      console.log("signed in!");
    } else if (currentUser == null) {
      router.push("/login");
    }
  }, [currentUser]);
  return (
    <Layout>
      <Users />
    </Layout>
  );
}

export default users;

现在，这原则上是有效的，但是重定向需要一些时间，并且在重定向之前首先显示“用户”页面。我知道有这个选项： https ://github.com/gladly-team/next-firebase-auth

但是，我不喜欢依赖于此，并且想知道是否有更好、更直接的方法来做到这一点？