样式在 nextjs 中刷新

Question

I'm having this weird issue where my styling is not sticking. I have a NavBar set to be 20vh in height. I also have an image set to be 100% in width. However, when I refresh the page, the NavBar height shrinks and the image width increases significantly. I'm not sure what is causing this problem. I have pasted the relevant code below but you can also find the repo for the app at this link (dev branch).

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} />;
};

As you can see, the NavBar is definitely not 20vh and the image is expanding beyond 100% of the page width.

Answer 1

Alert: I will give a pull request on the repo on github so you can implement the code. Fast Refresh is a Next.js feature that gives you instantaneous feedback on edits made to your React components. Fast Refresh is enabled by default in all Next.js applications on 9.4 or newer. With Next.js Fast Refresh enabled, most edits should be visible within a second, without losing component state.

How It Works If you edit a file that only exports React component(s), Fast Refresh will update the code only for that file, and re-render your component. You can edit anything in that file, including styles, rendering logic, event handlers, or effects. If you edit a file with exports that aren't React components, Fast Refresh will re-run both that file, and the other files importing it. So if both Button.js and Modal.js import theme.js, editing theme.js will update both components. Finally, if you edit a file that's imported by files outside of the React tree, Fast Refresh will fall back to doing a full reload. You might have a file which renders a React component but also exports a value that is imported by a non-React component. For example, maybe your component also exports a constant, and a non-React utility file imports it. In that case, consider migrating the constant to a separate file and importing it into both files. This will re-enable Fast Refresh to work. Other cases can usually be solved in a similar way. Arrow functions aren't supported. Name your functional component.

export default function MyPage () {...

Without export defualt function MyPage() {... it won't use fast refresh therefore your code won't work, to implement it into your Code do the following(for code block1):

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

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

Sorry if there are any grammatical errors my english isn't great. And also if you want your navbar to be sticky set the position to sticky like the following:

position: sticky;