Crop Outline is not visible and renders below image

Hello,

I have used react-image-crop for a long time. When I tried to use it in a different part of my app, I experienced an odd issue.

The crop outline is rendering invisible and below the image being loaded. Any idea why this might be happening?

constructor(props) {
        super(props);

        this.state = {
            src: null,
            crop: {
                unit: "%",
                width: 50,
                aspect: 1
            },
            modalOpen: false
        }

        this.onCropChange = this.onCropChange.bind(this);
    }

    toggleCropperModal = () => {
        this.setState({ modalOpen: !this.state.modalOpen})
    }

    onSelectFile = e => {
        if (e.target.files && e.target.files.length > 0) {
          const reader = new FileReader();
          reader.addEventListener("load", () =>
            this.setState({ src: reader.result, modalOpen: true })
          );
          reader.readAsDataURL(e.target.files[0]);
        }
      };

    onImageLoaded = image => {
        this.imageRef = image;
    };

    onCropChange = (crop, pixelCrop) => {
        // You could also use percentCrop:
        // this.setState({ crop: percentCrop });
        this.setState({ crop, pixelCrop });
    };

    onCropComplete = () => {
      this.makeClientCrop(this.state.crop, this.state.pixelCrop);
      this.setState({ modalOpen: false})
    };

    async makeClientCrop(crop, pixelCrop) {
        if (this.imageRef && crop.width && crop.height) {
          const croppedImageUrl = await this.getCroppedImg(
            this.imageRef,
            pixelCrop,
            "newFile.jpeg"
          );
          this.setState({ croppedImageUrl });
        }
      }

    getCroppedImg(image, pixelCrop, fileName) {
        const canvas = document.createElement("canvas");
        canvas.width = pixelCrop.width;
        canvas.height = pixelCrop.height;
        const ctx = canvas.getContext("2d");
    
        ctx.drawImage(
          image,
          pixelCrop.x,
          pixelCrop.y,
          pixelCrop.width,
          pixelCrop.height,
          0,
          0,
          pixelCrop.width,
          pixelCrop.height
        );
    
        return new Promise((resolve, reject) => {
          canvas.toBlob(blob => {
            if (!blob) {
              //reject(new Error('Canvas is empty'));
              console.error("Canvas is empty");
              return;
            }
            blob.name = fileName;
            window.URL.revokeObjectURL(this.fileUrl);
            this.fileUrl = window.URL.createObjectURL(blob);
            resolve(this.fileUrl);
          }, "image/jpeg");
        });
      }

<Section style={{display: 'inline-block'}} width='85%' marginBottom='35px'>
      {src && <ReactCrop
          imageStyle={{width: '100%', textAlign: 'center'}}
          src={src}
          crop={crop}
          onImageLoaded={onImageLoaded}
          onChange={onChange}
      />}
</Section>

If someone could point me in the right direction, that would be helpful!

[donigianrp]

Ok solved it. I didn’t import the css. So the crop didn’t have styles. I’m assuming the guy is also having a css issue. Where it’s either getting overridden or not imported.

[kvpendergast]

Yep, same problem. Just fixed.

import "react-image-crop/dist/ReactCrop.css";