小编CCC*_*CCC的帖子

我发现Material UI的官方网站正在使用@material-ui/core和@mui/material。

但我发现如果我使用@material-ui/core或@mui/materialTextfield，UI 不起作用，问题如下所述

React - 材质标签不在文本字段中的正确位置

如果您在 Google 中搜索 Material UI，然后转到https://mui.com/，它会告诉您npm install @mui/material。但几周前，我正在使用npm install @material-ui/core

如果我的 package.json 中同时包含@material-ui/core和，并且我将 和都包含在 中，是否会出现任何导致 UI 混乱的冲突@mui/materialscriptstylesheetindex.html

更新 1
在@muiCodeSandbox 中，
如果您尝试Textfield使用selectprop，当您打开选择时，overflow: hidden将添加到正文中。

https://codesandbox.io/s/selecttextfields-material-demo-forked-z6b9f?file=/demo.js

在我的项目中， overflow: hidden; padding: 15px已添加到正文中，但我检查过我对此什么也没做！

在Intellij中，有一个usage按钮。
我怎样才能删除它？我尝试用谷歌搜索但找不到任何解决方案

我有一个名为的测试文件integration.test.js

import app from "../app";
import request from "supertest";

describe("testing /users", () => {
  const app = request(app);
  // 5 test cases here. Both use app for api testing
})

describe("testing /images", () => {
  const app = request(app);
  // 6 test cases here. Both use app for api testing
})

describe("testing /blogs", () => {
  const app = request(app);
  // 7 test cases here. Both use app for api testing
})

当我运行jest测试用例时，它返回警告

A worker process has …

我想将 的值设置errors为

{
  email: {
    primary:"abc@gmail.com"
  }
}

编译后，返回错误：

Cannot set properties of undefined (setting 'primary')

应用程序.js

import "./styles.css";
import { useState, useEffect } from "react";

export default function App() {
  const [errors, setErrors] = useState({});

  useEffect(() => {
    const newErrors = errors;
    newErrors.email.primary = "abc@gmail.com";
  }, []);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Codesandbox：
https://codesandbox.io/s/immutable-http-w0mue?file=/ src/App.js

在我的 scss 文件中，我使用background-image: url("../../../assets/images/home/banner-mobile.png");

应用程序运行成功，但没有显示背景图片：

背景图片 URL 未解析。

webpack/webpack.base.js

const webpack = require("webpack");
const path = require("path");

const utils = require("./utils");

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.jsx",
  resolve: {
    alias: {
      "@": utils.resolve("src")
    },
    extensions: ["*", ".js", ".jsx"],
    fallback: {...},
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
          },
          {
            loader: "sass-loader"
          },
          {
            loader: "sass-resources-loader", …

当前用户界面：

当我想做的是，当滚动到达红色部分时，百分比将开始增加
用户无法继续向下滚动，直到百分比增加到 100%。

示例： https: //circleci.com/#advantage-flexibility

怎么做？

应用程序.js

import "./styles.css";
import { useScrollPercentage } from "react-scroll-percentage";

export default function App() {
  const [ref, percentage] = useScrollPercentage({
    /* Optional options */
    threshold: 0
  });
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>{" "}
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div ref={ref} style={{ color: "red" }}>
        <h1>
          When the scroll arrive this div, the …

进入网站时，这是您看到的第一个 UI。\n

然后，如果您向下滚动到 B 部分的开头
\n我预计 B 部分将变得粘性，并且currentPercentage如果您滚动，状态将开始从 0% 逐渐增加。
\n

当currentPercentage状态达到100%时，粘性效果将不再适用于B部分，然后您可以向下滚动到C部分或页面底部。

有点像circle-ci主页

您可以尝试滚动此部分。
\n

我认为我们需要弄清楚一些事情才能解决

\n
1. 当滚动位置到达B部分时如何使B部分变得粘性
   
\n
2. 如何滚动并增加到达 B 部分时的百分比
   
\n

我尝试过以 css 和 javascript 方式思考，仍然找不到解决方案

我也花了几天时间对此问题进行了大量研究，但仍然没有弄清楚。
\n我相信很多开发人员都想知道如何在他们的前端实现这种效果，并且对于其他开发人员将来有更快的解决方案来处理这种用户体验将是有益的，因为从我的情况来看\我注意到没有人提到这种用户体验处理。

如果有人能用一个例子来回答这个问题，以供其他开发人员参考，我将不胜感激。

应用程序.js

import "./styles.css";\nimport "bootstrap/dist/css/bootstrap.min.css";\n\nimport ProgressBar from "react-bootstrap/ProgressBar";\n\nimport { useState } from "react";\n\nexport default function App() {\n  const [currentProgress, setCurrentProgress] = useState(100);\n  return (\n    <div className="App">\n      <div className="sectionA">Section A</div>\n      <div className="sectionB">\n        Section …

我正在手动设置笑话。

我的回购结构：

my-proj
 - src
  - components
   ...
   - accordion
    - index.jsx
  - tests
   - components
    - accordion.test.js
  - setupTests.js
 - package.json

当我运行npm run test-coverage以获得测试覆盖率时，它只返回我测试过的文件，而不是/src.

包.json

  "scripts": {
    "test": "jest --watchAll",
    "test-coverage": "jest --coverage", 
  },
  "jest": {
    "moduleDirectories": [
      "node_modules",
      "src"
    ],
    "moduleNameMapper": {
      "\\.(css|scss)$": "identity-obj-proxy"
    },
    "setupFilesAfterEnv": [
      "<rootDir>/src/setupTests.js"
    ],
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ]
  },

当我尝试通过以下方式运行应用程序时npm start

Failed to load plugin '@typescript-eslint' declared in '.eslintrc.json': Class extends value undefined is not a constructor or null

为什么会发生这种情况以及如何解决？

eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["plugin:react/recommended", "airbnb"],
  "parser": "@typescript-eslint/parser",
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".ts", ".tsx"],
        "moduleDirectory": ["src", "node_modules"]
      }
    }
  },
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint"],
  "rules": {
    "no-console": "off"
  }
}

包.json

  "devDependencies": {
    "@babel/core": "^7.16.5",
    "@babel/preset-env": "^7.16.5",
    "@types/react-dom": …

下面的 cron 作业每周日 14:35:00 运行，但我想每 2 个周日 14:35:00 运行一次运行作业。

有可能这样做吗？

var CronJob = require('cron').CronJob;

new CronJob('0 35 14 * * 0', async function () { 

}, null, true, 'America/Los_Angeles');