为什么Remix SSR生成的HTML里CSS变量在客户端显示不一致？

东方爱菊提问于 2026-02-14 18:28:28 阅读 692

框架

我在用Remix开发SSR应用时发现了个怪事，服务端渲染的HTML里有这样定义的CSS变量：


:root {
  --primary-color: #3498db;
}

但页面加载到客户端后，通过JavaScript获取getComputedStyle发现--primary-color变成了透明色。明明服务端渲染的HTML源码里变量是正常的，这是SSR和CSR的样式上下文不一致吗？

已经试过把CSS放在app/styles.css全局文件里，也确认过网络请求没404，但问题依旧。难道是服务端没正确注入CSS变量？或者需要特殊配置？

我来解答赞 14 收藏

反馈

2 条解答

码农江梅 Lv1

这问题我之前也踩过，不是SSR和CSR上下文不一致，是CSS变量在服务端渲染时没被正确注入到客户端的样式上下文中。

标准写法里，Remix推荐把CSS变量定义在入口样式文件里，比如 app/styles.css，但光有这个还不够——你得确保这个文件被 links 函数正确返回，并且是在服务端和客户端都能加载到的。

先检查 root.tsx 里的 links 导出是不是这样写的：

export const links: LinksFunction = () => [

  { rel: "stylesheet", href: stylesheet },

];

注意 stylesheet 要指向你定义CSS变量的文件路径，比如 "./styles.css"，而且这个文件得放在 app 目录下，别搞错路径。

另外，Remix默认会做CSS代码分割，如果你的CSS变量定义在某个路由组件的 links 里，而这个路由没被预加载或预取，那客户端第一次渲染时确实拿不到变量——服务端渲染时因为是同步加载了这个文件，所以能用，但客户端是异步加载的，就出现你说的“服务端正常，客户端透明”的情况。

解决办法有三个：

1. 把CSS变量定义放到全局入口样式（比如 app/styles.css），并在 root.tsx 里用 links 显式引入，这是最稳妥的；
2. 如果用了 linkManifest 或 entry.client.tsx 自定义加载逻辑，确认 import "./styles.css" 确实被写在了入口文件里；
3. 检查有没有用 rel="stylesheet" 的条件加载（比如媒体查询），CSS变量必须在无条件加载的样式里定义，否则浏览器会跳过没匹配的样式块。

最后提醒一点：getComputedStyle 获取CSS变量时，如果变量值是 transparent，大概率是浏览器根本没解析到那个 :root { --xxx: xxx } 规则——不是Remix的问题，是加载顺序或路径问题。

我之前就是路径写错了半截，本地开发跑得通，打包后就崩了，这种坑得踩两次才记得住。

2026-02-24 12:08

开发者德丽 Lv1

这个问题我之前也踩过坑，说白了就是服务端渲染和客户端渲染的样式加载时机不一致导致的。Remix在SSR阶段确实会把CSS变量注入到HTML里，但客户端的JavaScript执行时，可能因为某些原因覆盖了这些变量。

我当时遇到的情况是，客户端的样式表加载顺序有问题，或者某些动态脚本改写了CSS变量。你可以先检查一下是不是有其他脚本在页面加载后修改了 :root 的样式。比如有些UI库或者第三方插件会偷偷覆盖全局CSS变量。

解决办法有几个方向可以试试。第一种是确保你的全局样式文件在客户端加载时优先级最高，可以通过调整引入顺序来实现。比如在 entry.client.jsx 里，确保样式文件在应用代码之前加载：

import '../styles.css';

import { hydrate } from 'react-dom';

// 其他代码

第二种方法更保险，直接在客户端初始化时强制同步服务端的CSS变量。可以用下面的代码手动把服务端的变量重新应用一遍：

document.addEventListener('DOMContentLoaded', () => {

  const serverStyle = document.querySelector('style[data-remix-css]');

  if (serverStyle) {

    const root = document.documentElement;

    const styles = serverStyle.sheet.cssRules;

    Array.from(styles).forEach(rule => {

      if (rule.selectorText === ':root') {

        Object.keys(rule.style).forEach(prop => {

          if (prop.startsWith('--')) {

            root.style.setProperty(prop, rule.style.getPropertyValue(prop));

          }

        });

      }

    });

  }

});

这个代码的作用是，在页面加载完成后，从服务端注入的 <style> 标签里提取所有的CSS变量，然后重新应用到客户端的 :root 上。

还有一点需要注意，如果你用了某些CSS-in-JS库，可能会有自己的样式注入机制，这时候需要确认它们和Remix的SSR流程是否兼容。我当时就是因为一个CSS-in-JS库搞了半天才发现问题。

总之核心思路就是确保服务端和客户端的样式上下文一致，要么通过加载顺序控制，要么通过手动同步变量来解决。希望这些建议能帮你搞定这个问题。

2026-02-14 20:04