Next.js中React-three/fiber画布宽高被覆盖的原因与修复方法

可能的原因 #

1. 样式优先级不足：你写的全局canvas选择器优先级较低，被Next.js 13默认样式、第三方UI库样式，或是react-three/fiber自身注入的内联样式覆盖。浏览器默认canvas的 fallback 尺寸为300px×150px，当自定义样式失效时就会显示这个默认值。
2. 父容器无明确尺寸：canvas的width:100%和height:100%是相对父容器计算的，如果父容器没有设置固定或百分比宽高，浏览器无法计算canvas的实际尺寸，会 fallback 到默认值。
3. Next.js 13 App Router样式加载顺序问题：如果自定义样式未正确导入（比如没放在app/globals.css，或者导入顺序晚于其他全局样式），会被后续加载的样式覆盖。

修复步骤 #

1. 提升样式优先级 #

替换全局canvas选择器为更具体的选择器，比如给Canvas组件的父容器加类名.r3f-container，然后编写：

.r3f-container canvas {
  width: 100%;
  height: 100%;
}

如果还是被覆盖，可临时用!important强制生效（优先通过更具体的选择器提升优先级，尽量少用!important）：

.r3f-container canvas {
  width: 100% !important;
  height: 100% !important;
}

2. 给父容器设置明确尺寸 #

Canvas的宽高依赖父容器的尺寸，比如要让它占满视口，给父容器添加样式：

.r3f-container {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

如果是局部容器，给对应容器设置具体的width和height值即可。

3. 直接给Canvas组件设置内联样式 #

内联样式优先级高于外部CSS，直接在react-three/fiber的Canvas组件上添加样式：

import { Canvas } from '@react-three/fiber';

export default function R3FScene() {
  return (
    <div className="r3f-container">
      <Canvas style={{ width: '100%', height: '100%' }}>
        {/* 你的3D内容 */}
      </Canvas>
    </div>
  );
}

4. 检查Next.js样式导入规则 #

如果使用App Router，确保自定义样式在app/globals.css中导入，或者在组件内使用CSS模块（比如R3FScene.module.css），模块样式优先级更高且不会污染全局。

5. 禁用react-three/fiber的默认尺寸控制 #

如果上述方法无效，尝试让Canvas完全遵循CSS样式，关闭自身的尺寸计算：

<Canvas gl={{ width: undefined, height: undefined }}>
  {/* 你的3D内容 */}
</Canvas>

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