-1

I have a Next.js app that uses react-three/fiber here: https://github.com/ChristianOConnor/linear-vaporwave-react-three-fiber-typescript AND CHECKOUT migrate-to-nextjs13 branch. The issue is regarding css. I have a react-three/fiber object rendered in the middle of the page. I have this css:

canvas {
  width:100%;
  max-width:100%;
  height:100%;
}

Which should make the react-three/fiber object take up it's entire container, but that is overridden and reset to 300px by 150px. See here:
enter image description here

As you can see, the css set to canvas for width and height is crossed out.

It should look like this (I manually in the web console changed the width and height to 100%)
enter image description here

I've made my source code available in the link towards the top of the post, just remember to switch the code to the migrate-to-nextjs13 branch.

So why is the canvas's width and height being overriden and how do I fix this?

ChristianOConnor
  • 820
  • 7
  • 29

1 Answers1

0

<Canvas> takes the same width/height as its nearest absolute or relative parent. you don't need to target canvas in css directly, just make sure the container where canvas resides in has position: absolute (or relative) and is scaled correctly.

hpalu
  • 1,357
  • 7
  • 12