Working with styled-components

[RubenZx]

Is the component prepared to work with "styled-components"?

I'm not able to use the refprop. I'm having problems when I try to pass ref with the camera wrapped by styled.

The code that I have is the following:

import { useCallback, useRef } from "react";
import Webcam from "react-webcam";
import styled from "styled-components";

const StyledWebcam = styled(Webcam)`
  border-radius: 1.125rem;
`;

const MyCameraComponent = () => {
  const webcamRef = useRef<Webcam>(null);

  const capture = useCallback(() => {
    if (webcamRef.current) {
      const imageSrc = webcamRef.current.getScreenshot();
      // TODO
    }
  }, [webcamRef]);

  return (
    <>
      <StyledWebcam
        audio={false}
        ref={webcamRef}
        screenshotFormat="image/jpeg"
        videoConstraints={videoConstraints}
      />
      <button onClick={capture}>Capture photo</button>
    </>
  );
}

export default MyCameraComponent;

---

Versions that I'm using

• react: 17.0.2
• typescript. 4.1.2
• react-webcam: 6.0.0
• styled-components: 5.3.1

[mozmorris]

Here's an example: https://codepen.io/mozmorris/pen/wveZEYd?editors=0010