程序员经验分享-hwhale

使用nextjs和react-jss时className不匹配

2023-12-24

我将 nextjs 与 typescript 和 React-jss 一起使用。我收到错误：

Warning: Prop `className` did not match. Server: "mobileNavToggle-0-2-10" Client: "mobileNavToggle-0-2-2"

我认为这是因为 SSR 和水合产生不同的类名造成的。这似乎只在我手动重新加载页面时发生，而不是在下次自动重新加载页面时发生。我怎样才能解决这个问题？


我解决了这个问题，添加了一个_document.js就像在with-react-jss例子：

https://github.com/vercel/next.js/blob/master/examples/with-react-jss/pages/_document.js https://github.com/vercel/next.js/blob/master/examples/with-react-jss/pages/_document.js

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

ReactJS

Nextjs

jss

使用nextjs和react-jss时className不匹配 的相关文章

  • 如何使用 useQuery 挂钩来填充其他挂钩中的状态？

    我最近一直在处理一些与钩子相关的问题 因为我一直在我的一个项目中实现钩子 我不断收到错误 渲染的钩子数量比上一次渲染期间的钩子数量多 看来我能让代码正常工作的唯一方法是将 useQuery 挂钩放在所有其他挂钩之后 然而 这是一个问题 因为

  • 如何强制传单更新地图？

    当我将 Leaflet 与 React 一起使用时 我遇到了问题 据我研究 问题是 Leaflet 也想控制 DOM 渲染 现在 国家将使用与后端信息相对应的特定颜色代码 范围为1 gt 100 正确着色 但是 它每分钟更新一次 更新后 国

  • 读取多个文件 cotent 的 React JS

    我正在尝试使用 React js 读取多个文件 但我的代码只读取一个文件 而不会读取其余文件 有什么建议吗 Thanks constructor props super props this state files changedFileI

  • React - 通过 css 模块全局使用 Bootstrap

    反应和所有这些东西都很新 所以我在这里需要一些帮助 我最近添加了https github com gajus babel plugin react css modules https github com gajus babel plugi

  • 如何在reactfire上启用持久性？

    我想使用以下方法在我的 PWA React 应用程序上实现 Firestore 离线持久性反应火 https github com FirebaseExtended reactfire图书馆 const firestore useFires

  • iOS 是否有像 Android 一样的应用内更新功能？

    我为 Android 和 iOS 开发了一个移动应用程序 现在每周我们都会发布 2 个更新 大多数时候 Android 和 iOS 用户会停止应用程序的自动更新 但是 如果有重要更新或错误修复或新功能 那么我们必须要求用户更新应用程序以获得

  • 使用输入更新 redux 状态

    如何从文本输入更新 redux 状态 我正在尝试用文本输入做一个非常简单的 Hello World 当有人在文本输入中输入内容时 它应该更新我商店的 searchTerm 值 我无法弄清楚这些事情 1 如何获取输入的值并将其传递到其 onC

  • 如何为 NextAuth.js 创建自定义 UI（使用 AWS Cognito）？

    是否可以为 AWS Cognito 提供自定义 UINextAuth js https next auth js org 当我使用 NextAuth js 调用 API 时 我看到这个 主观上丑陋的 屏幕 只有一个按钮可以将您重定向到真正的

  • react-hook-form：检查未保存的更改

    我有一个由以下人员控制的预填写表格react hook form https react hook form com const control handleSubmit formState setValue reset useForm

  • 防止在 MaterializeCSS 下拉菜单中单击时关闭该下拉菜单

    我正在为当前项目使用 Materialize css 并且我的下拉菜单中包含一些输入表单 下拉菜单可以选择关闭 单击外部 dropdown content 单击内部 dropdown content 点击 dropdown button 我

  • “ReactNode”不是有效的 JSX 元素

    我有以下代码 代码沙箱 https codesandbox io s react typescript forked 50beyp file src App tsx import ComponentType ReactNode from r

  • 如何在rails中使用npm包？

    我正在尝试使用王牌编辑 https github com ajaxorg ace在我的 Ruby on Rails 应用程序中 大部分视图由 React 组件组成 我正在使用反应轨道宝石 https github com reactjs r

  • 处理 Redux 和 React 中错误的最佳实践

    我的 redux 操作中有一个异步函数 它在我的减速器中返回一个像这样的对象 user fetching false fetched false error null 所以基本上当我开始调用异步函数时我将 redux 状态更新为fetchi

  • 错误找不到“pages”目录。请在项目根目录下创建一个”

    以前我的项目设置是 public next src pages components assets next config js 这工作正常 但我将结构更改为以下 public src client next config js jscon

  • React 不响应按键事件

    我正在尝试实现一些非常基本的按键检测 但我根本无法让它工作 我有一个裸露的组件 应该在onKeyDown事件 但控制台中没有任何内容被注销 class App extends React Component constructor prop

  • 渲染作为 Prop 传入的 Component

    我怎样才能渲染一个StyledComponent它是作为道具传入的吗 我正在传递一个Spinner组件到我的BarComponent作为渲染的道具 我尝试使用 this props icon in my BarComponent在下面的示例

  • 提及列表和表情符号顶部位置 (Draft.js)

    您能帮我如何将其位置从下到上更改吗 我想在文本顶部而不是底部显示提及列表 关于表情符号列表的同样问题 示例链接 https www draft js plugins com plugin emoji 你可以通过以下方式实现它position

  • 使用 jestjs 时模拟 sessionStorage

    好的 我有一个简单的示例 React 组件 它与会话存储 https developer mozilla org en US docs Web API Window sessionStorage App jsx var React requ

  • React 中的 Reconciliation 详解

    我是 React JS 的新手 谁能准确解释和解是如何运作的 我尝试从 React 官方网站上理解它 但没有得到它 我是这样理解的 您会同意 React 使用组件使事情变得简单且更快 通过 JSX 我们可以让用户定义的组件变得更容易 一天结

  • React 键“mods”的切片缩减器在初始化期间返回未定义。 （还原）

    减速器 index js import combineReducers from redux import mods from mods js export default combineReducers lt error comes fr

随机推荐

  • Ubuntu-nodejs-npm install -g > 错误：EACCES：权限被拒绝，mkdir

    安装 NodeJS 时遇到问题npm包裹 在 Digital Ocean Droplet Ubuntu 14 04 服务器上 npm install g PACKAGE NAME 我什至尝试过sudo有同样的错误 错误信息 Error EA

  • macOS 上使用 Ninja 的 CMake GUI

    我正在尝试使用 CMake GUI 创建 Ninja 构建文件 我尝试使用 Brew 手动在 macOS 上安装 Ninja 两次我都确保 ninja 在 PATH 上可用 但 CMake GUI 始终无法找到 ninja CMake 错误

  • 使用SQL中的distinct函数

    我正在运行一个 SQL 查询 我想知道的是 有没有一种方法可以选择表中其中一列的值不同的行 当我使用 unique 函数时 它返回所有不同的行 所以 select distinct teacher from class etc 这工作正常

  • 尝试重定向时看到“无法修改标头信息”错误

    我有基本的 PHPmail 该脚本通过电子邮件向用户发送他们刚刚提交的表单的详细信息 PHP 可以很好地将所有数据插入数据库 但是当我想在数据处理完成后重定向它们时 就会出现问题 我目前正在使用 mail email subject mes

  • 代码从 Python 2.6 更改为 3.x

    我想得到pywbem http pywbem svn sourceforge net 在 Python 3 2 中工作 在 2 6 中工作正常 但在 mof compiler py 中的这部分代码上构建失败 File pywbem 0 7

  • Postgresql 获取一列或大表中一组唯一值的最快方法

    我在 Postgresql 数据库中有一个不断增长的 可能非常大的表 其中包含来自不同 设备 的不同 通道 的 数据 例如 Table data id PK device id FK gt device channel id FK gt c

  • 迁移出 AppEngine

    我有一个在 AppEngine 上运行的应用程序 每天使用大约 50 个 CPU 小时 大部分时间都花在等待数据存储上 我正在考虑将其从 AppEngine 移至 Rackspace 云服务器之类的地方 因为我认为如果我可以将部分工作卸载到

  • iOS - 如何检查模式视图是否存在

    有没有办法检查模式视图是否存在 我想仅在存在模式视图时运行方法 另外 如果我有多个模态视图 有没有办法检查是否存在某个模态视图 我使用以下代码来呈现和关闭模态视图 self presentModalViewController myModa

  • 如何从 QML 访问 C++ 枚举？

    class StyleClass public QObject public typedef enum STYLE RADIAL STYLE ENVELOPE STYLE FILLED Style Style m style h文件中有上述

  • 如何在 PHP 5.2.8 中比较两个 DateTime 对象？

    看了一下PHP文档 有以下两种方法DateTime对象似乎都可以解决我的问题 日期时间 差异 http au php net manual en datetime diff php 获取差异并使用它来确定哪个更古老 日期时间 获取时间戳 h

  • 用于导航到变量类的 Visual Studio 快捷方式

    Usually it is a simply as clicking on F12 on the declaration class type of a variable 然而 随着使用量的增加var关键字 我想知道 Visual Stud

  • 错误：为 h5py 构建轮子失败无法构建 h5py 错误：无法为 h5py 构建轮子，这是安装 pyproject.toml-basedprojects 所必需的

    当我运行以下命令来安装tensorflow时 出现此错误 python3 m pip install tensorflow macos ERROR Failed building wheel for h5py Failed to build

  • 小胡子模板不会在表 tbody 内呈现

    为什么相同的 JSON 对象代码会生成输出ul元素 但不带有table tag 我的小胡子模板如下 div h3 name h3 ul students li name age li students ul div div table th

  • PHP 在路径中包含变量

    因此 我们构建的网站必须从本地开发服务器移植到测试服务器 然后移植到实时服务器 为此我们创建了一个变量 当我们将网站从服务器移动到下一个服务器时 想法是简单地更改 path 定义以适应新的开发服务器 目前 当我们调用包含时 我们在每个页面上

  • 在 CSS 中使用相对大小而不是固定大小

    我想使用相对大小而不是固定大小 我想用它们 我的CSS是 body font 10px wrap font 1 2em wrap ul li padding left 2em 的价值是什么li的内边距以 px 为单位 我猜它是 2 0 10

  • Java Transformer 如何忽略名称空间

    我必须将 XML 转换为 XHTML 但 XML 定义了命名空间xmlns http www lotus com dxl 它从未在整个 XML 中使用过 因此解析器不会解析任何内容 有没有办法忽略命名空间 我正在使用 Oracle java

  • 使用 Web Api 验证 .NET MVC 应用程序

    我有一个基于 SPA VS 2013 模板的 Web Api 2 项目 我在该 Api 中配置了不记名令牌身份验证 我还有一个单独的 MVC 5 项目 我想使用该 Web Api 进行身份验证 那可能吗 如何 到目前为止我做了什么 在我的

  • Eclipse 中没有服务器；尝试安装 Tomcat

    我正在尝试在 Eclipse 中安装 Tomcat 但无法显示服务器选项卡 当我去窗口 gt 显示视图 gt 其他并输入 服务器 我没有得到任何结果 当我去文件 gt 新建 gt 其他并输入 服务器 我也什么也得不到 有谁知道我的服务器出了

  • 如何使用java api知道jenkins构建执行器是否空闲

    我想通过使用 java jenkins API 知道 jenkins 中的构建执行器是否空闲 空闲或任何作业正在主节点中运行 而我的要求是这样的 如果任何执行者有空 我必须触发詹金斯工作 否则我会等到他们可用 为此我必须使用 Jenkins

  • 使用nextjs和react-jss时className不匹配

    我将 nextjs 与 typescript 和 React jss 一起使用 我收到错误 Warning Prop className did not match Server mobileNavToggle 0 2 10 Client

热门标签