样式在 nextjs 中刷新答案

【问题标题】：styling changing on refresh in nextjs样式在 nextjs 中刷新
【发布时间】：2021-08-30 14:32:20
【问题描述】：

我遇到了一个奇怪的问题，即我的样式不固定。我将 NavBar 的高度设置为 20vh。我也有一个图像设置为 100% 的宽度。但是，当我刷新页面时，NavBar 高度会缩小，图像宽度会显着增加。我不确定是什么导致了这个问题。我在下面粘贴了相关代码，但您也可以在 link（开发分支）找到该应用的 repo。

const useStyles = makeStyles((theme) => ({
  navBar: {
    height: "20vh",
    width: "100%",
  },
}));

const NavBar = () => {
  const classes = useStyles();
  return <div className={classes.navBar}>NavBar</div>;
};

const useStyles = makeStyles((theme) => ({
  introImg: {
    width: "100%",
    height: "auto",
  },
}));

const Intro = () => {
  const classes = useStyles();
  return <img src={marco4sup} className={classes.introImg} />;
};

如您所见，NavBar 绝对不是 20vh，并且图像正在扩展超过 100% 的页面宽度。

【问题讨论】：

标签： javascript css reactjs material-ui next.js

【解决方案1】：

警告：我将在 github 上的 repo 上发出拉取请求，以便您可以实现代码。快速刷新是 Next.js 的一项功能，它可以为您对 React 组件所做的编辑提供即时反馈。在 9.4 或更高版本的所有 Next.js 应用程序中默认启用快速刷新。启用 Next.js 快速刷新后，大多数编辑应该在一秒钟内可见，而不会丢失组件状态。

它是如何工作的如果您编辑仅导出 React 组件的文件，Fast Refresh 将仅更新该文件的代码，并重新渲染您的组件。您可以编辑该文件中的任何内容，包括样式、呈现逻辑、事件处理程序或效果。如果你编辑一个包含非 React 组件的导出文件，Fast Refresh 将重新运行该文件以及导入它的其他文件。因此，如果 Button.js 和 Modal.js 都导入了 theme.js，编辑 theme.js 将更新这两个组件。最后，如果您编辑由 React 树之外的文件导入的文件，Fast Refresh 将回退到完全重新加载。你可能有一个文件，它渲染了一个 React 组件，但也导出了一个由非 React 组件导入的值。例如，也许你的组件也导出了一个常量，而一个非 React 实用程序文件导入了它。在这种情况下，请考虑将常量迁移到单独的文件并将其导入到这两个文件中。这将重新启用快速刷新工作。其他情况通常可以用类似的方式解决。不支持箭头函数。命名您的功能组件。

export default function MyPage () {...

如果没有 export defualt function MyPage() {... 它不会使用快速刷新，因此您的代码将无法工作，要在您的代码中实现它，请执行以下操作（对于代码块 1）：

export default function UseStyles () {
  navBar: {
    height: "20vh",
    width: "100%",
  },
}));

const NavBar = () => {
  const classes = useStyles();
  return <div className={classes.navBar}>NavBar</div>;
};

抱歉，如果有任何语法错误，我的英语不是很好。此外，如果您希望导航栏保持粘性，请将位置设置为粘性，如下所示：

position: sticky;

【讨论】：