How to style the canvas element in React? about react HOT 5 CLOSED

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.

from react.

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?

from react.

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.

from react.

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?

from react.

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

from react.