How to style the canvas element in React?

[danlin604]

The canvas is wrapped in unmarked div tags.

<div>
  <canvas>
</div>

Is there a way to apply styles to the canvas so I can manipulate it as a background of another element (position: 'absolute', top: 0, left: 0, zIndex: -1)? So far, my react styling does nothing but push the canvas down.

Additional info, I would like to be able to do this without needing an external css file. So far, I have the and it would be great if I can somehow manipulate it's zIndex, position, and all other typical canvas styles.

[Alynva]

If you put the <P5Wrapper /> into a component that have how to use some selector, you can use the document.querySelector(".MyComponent[ > .otherParentsElements] > div > canvas") like this, to get the <canvas /> element.

[danlin604]

I found a css alternative around this using styled-components:

const ItemContainer = styled.article`
  ...
  canvas {
    flex: 1;
  }
`

I can style the parent container that contains <P5 Wrapper> and target <canvas> child within.

[slothdude]

I found a css alternative around this using styled-components:

const ItemContainer = styled.article`
  ...
  canvas {
    flex: 1;
  }
`

I can style the parent container that contains <P5 Wrapper> and target <canvas> child within.

I tried this by doing this

in react component

<div className = "background">
     <P5Wrapper sketch={background}/>
</div>

.css file

.background{
  z-index: -1;
}
canvas{
    z-index: -1;
}

But the canvas is still in front. Any ideas?

[Alynva]

Edit: I usually use z-index on elements at the same level, not between parent end child, but with you want...

@slothdude may be position: absolute; in canvas.

But why either z-index is defined to -1?

[slothdude]

position:absolute / position:fixed fixed it, thanks!