move component to the left with padding

Viewed 32

I am using p5.js's VIDEO component inside a Sketch component. However, I am unable to style it.

I want to move it towards a bit right but it's stuck at the extreme left of my screen. I added paddingLeft for Sketch's css but it doesn't make a difference.

Similarly, I want the component to be placed at the top of the screen. However, it starts from the middle of the screen. Adding padding-left makes no difference at all. I believe the Sketch or canvas component has some sort of background/padding of it's own which I am unable to see.

export const Component: React.FC<ComponentProps> = (props: ComponentProps) => {

    let capture: p5Types.Element;
    const setup = (p5: p5Types, canvasParentRef: Element) => {
        p5.createCanvas(390, 240);
        capture = p5.createCapture(p5.VIDEO);
        capture.size(320, 240);
      }
      
      const draw = (p5: p5Types) => {
      }

      
    return <Sketch setup={setup} draw={draw} className="sketch"/>
    ;
};

How can I move the video component towards the right and/or top of the screen?

Codesandbox: https://codesandbox.io/s/objective-wind-yx1gm?file=/src/Video.tsx

1 Answers
Related