小编Jvn*_*Jvn的帖子

使用@mui/material/useMediaQuery于Next.js会导致样式在首次渲染时闪烁。

我知道这是由于useMediaQuery服务器端和客户端之间的值发生变化造成的。有没有什么办法解决这一问题？

import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
...
const theme = useTheme();
const matches = useMediaQuery(theme.breakpoints.down('md'));
...
<Typography variant={matches ? 'subtitle1' : 'h5'}>
  {text}
</Typography>

虽然可以通过如下所示指定显示来切换来轻松解决此问题，但display 应尽可能避免这种冗长的书写风格。

<Typography sx={{ display: {xs: 'block', md: 'none'} }} variant={'subtitle1'}>
  {text}
</Typography>

<Typography sx={{ display: {xs: 'none', md: 'block'} }} variant={'h5'}>
  {text}
</Typography>

默认背景颜色是白色，但我想将其更改为深色。

mui v5 中启用了深色模式。

我已经找到了更改错误、信息等的方法，但我想做的是更改默认背景颜色而不指定任何变体。

// _app.tsx
<SnackbarProvider maxSnack={3}>
  <Component {...pageProps} />
</SnackbarProvider>

这就是notstack的实现方式。