重现步骤
请原谅我的非母语表达。
背景故事
在没有NextJS或服务器端渲染的时代，我们想找到一种方法来复用组件的响应式逻辑。我们决定在每个组件上添加size属性，并根据屏幕大小使用useMediaQuery进行更改。
位于第9行的useResponsive钩子是我们基于useMediaQuery的自定义钩子。
这对我们来说效果很好。
当前行为
目前，我们尝试使用NextJS,并收到以下警告：
它使我们的UI始终渲染为xs尺寸，只有在我们尝试调整屏幕大小时才能正常工作。您可以在下面的演示中看到。
POWX.and.12.more.pages.-.Personal.-.Microsoft_.Edge.2024-05-31.23-01-41.1.1.mp4
经过研究，我们发现我们在useMediaQuery中将noSsr设置为true,所以我们将其设置为false。
现在我们不再看到这个问题，但出现了一个新问题。在第一次渲染时，useMediaQuery总是返回false,使我们的UI始终渲染为xs尺寸，然后再渲染正确的尺寸。
我们尝试了所有方法，但仍然无法解决问题。
我们陷入了困境，请帮忙，非常感谢。
预期行为
不再出现警告，useMediaQuery在第一次渲染时应返回true。
上下文
- 无响应*
您的环境
我正在使用最新版本。
搜索关键词:Prop className did not match
3条答案
按热度按时间jogvjijk1#
这段文档的内容可能会对你有所帮助：https://mui.com/material-ui/react-use-media-query/#server-side-rendering?
pod7payv2#
谢谢，我会看一下并稍后告诉你。
f87krz0w3#
你好，看起来https://mui.com/material-ui/react-use-media-query/#server-side-rendering 中的解决方案并不符合我的预期。我正在尝试通过将响应式代码封装在组件中并公开size属性来重用它。你有没有一种最佳实践可以重用响应式代码而不会引起问题，并且符合MUI的设计？