The current situation is that styling is being applied in two places: global.css and index.js using styled-components.
Challenge
When the local server is started or restarted, and a manual page refresh is done, all styles are correctly applied. Any style changes are also reflected immediately. However, after performing another manual page refresh, only styles from global.css are applied initially. The styles from the index.js file do not load until certain actions are taken:
- Clicking on one of the links and then on the return button (as shown in the 2nd screenshot)
- Restarting the local server and refreshing the page
I have recorded the steps I took. Apologies for the background noise. 😌
https://www.youtube.com/watch?v=cp-97ZYsQhw
I have included the code snippets just to provide a better overview of the code. I am trying to create a functional example on codesandbox.
Question
Why does next.js only load the global.css initially, ignoring the index.js with additional CSS until either the local server is restarted or specific links are clicked?
import Link from "next/link";
import styled from 'styled-components';
const StyledMain = styled.main`
width: 100vw;
height: 100vh;
display: grid;
justify-content: center;
align-content: center;
`;
const StyledLi = styled.li`
font-size: var(--fontsize-profileButtons);
text-align: center;
list-style: none;
margin: 50px 0;
`;
export default function Home() {
return (
<>
<StyledMain>
<ul>
<StyledLi>
<Link href="/about">about</Link>
</StyledLi>
<StyledLi>
<Link href="/projects">projects</Link>
</StyledLi>
<StyledLi>
<Link href="/blog">blog</Link>
</StyledLi>
</ul>
</StyledMain>
</>
)
}html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
width: 100vw;
height: 100vh;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>What index.js appears like after page refresh and how it's supposed to look
https://i.sstatic.net/PZYXO.png
Steps to ensure that the CSS code inside index.js is also loaded
https://i.sstatic.net/1cqFl.png