I'm using CropperJS via the react-cropper package. It works great, but I can't work out how to style the cropper UI - All I want to do is to restrict the height/width so that the cropping part forms only part of a dialog - but it always scales dependent on the image that loads, so a tall thin image would make the UI much taller than a short wide one.

<Cropper
  autoCropArea={0.9}
  data={initialDetails.cropperData ?? undefined}
  viewMode={3}
  src={originalImageUrl ?? undefined}
  onInitialized={(cropper) => {
    cropperInstanceRef.current = cropper;
  }}
  zoomable={false}
  guides
/>

What I've tried:

• All manner of CSS - seems to be thwarted by cropper setting some heights and widths as inline styles
• Every option in the docs for CropperJS that seemed like it might help.

If it is relevant - there is no image loaded at first - the user loads it using a file input. I'd like to have (for the sake of argument) 400px by 400px reserved for the cropper, whether there is no image or an image of any dimensions loaded.