能否在React Server Component（RSC）中访问与操作DOM？

首先明确结论：不能直接在RSC中进行DOM操作——因为RSC运行在服务端（比如Node.js），不存在浏览器特有的document、window等DOM API环境，没有真实的DOM树可以操作。

但你的核心需求是「让服务器输出的HTML已经包含CSS变量的修改，不需要客户端JS执行」，这个需求完全可以实现，不需要把组件改成React Client Component（RCC），具体方案如下：

方案1：服务端生成内联全局样式标签 #

在RSC中直接返回一个<style>标签，动态给:root设置CSS变量，服务器渲染时会把这个样式嵌入到最终的HTML里，客户端加载后浏览器会直接解析生效，全程不需要客户端JS参与。

示例代码：

// 这是一个RSC组件
export default async function ServerComponent() {
  // 服务端异步获取数据
  const foo = await fetchServerData();

  return (
    <>
      <style dangerouslySetInnerHTML={{ __html: `:root { --foo: ${foo}; }` }} />
      {/* 其他服务端渲染的内容 */}
      <div className="foo-dependent">使用--foo变量的内容</div>
    </>
  );
}

注意：这里用dangerouslySetInnerHTML是因为直接在JSX的<style>里写模板字符串可能会有转义问题，用这个API可以确保样式代码被正确渲染。

方案2：给特定元素动态设置内联style属性 #

如果不是全局CSS变量，而是给某个具体元素设置样式，直接在RSC的元素上通过style属性动态赋值即可，服务器会把样式直接渲染到HTML标签中。

示例代码：

export default async function ServerComponent() {
  const primaryColor = await fetchThemeColor();

  return (
    <header style={{ backgroundColor: primaryColor }}>
      动态主题色的头部
    </header>
  );
}

为什么不能用document操作？ #

RSC的运行上下文是服务端环境，没有浏览器提供的DOM对象，document是浏览器特有的全局变量，在服务端调用会直接抛出「document is not defined」的错误，这是环境限制导致的，无法绕过。

总结来说，你不需要依赖客户端的DOM操作，通过在RSC中生成内联样式，就能让服务器输出的HTML直接包含所需的样式修改，完全符合你的预期。

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