Next.js页面切换时内联样式线性渐变背景不加载问题求助

问题根源 #

你内联样式里的linear-gradient值末尾多了一个分号，这会导致React解析内联样式时无法正确识别该属性值。在Next.js通过Link组件进行客户端路由切换的过程中，这种无效的样式值会被直接忽略，背景因此显示为默认白色；而刷新页面时，浏览器会重新解析整个页面样式，容错处理这个错误，所以背景能正常渲染。

修复步骤 #

移除内联样式字符串末尾的分号即可：

style={{
  background: 'linear-gradient(153.68deg, #17191D 0%, #0C152C 45.82)',
}}

补充说明 #

React的内联样式采用对象语法，属性值无需像CSS文件那样添加结尾分号——它本质是JavaScript字符串，额外的分号会被当作值的一部分，直接导致样式规则失效。而Tailwind的渐变类是预编译好的有效CSS规则，因此不会出现这类解析问题。

内容的提问来源于stack exchange，提问作者Holland Pleskac