Styling

react-easy-crop injects its required CSS automatically.

If you disable automatic injection, import the CSS yourself:

import 'react-easy-crop/react-easy-crop.css'

<Cropper disableAutomaticStylesInjection />

The cropper container uses absolute positioning. The parent element should define the cropper size:

.cropper-wrapper {
  position: relative;
  width: 100%;
  height: 400px;
}

Use style for inline overrides:

<Cropper
  style={{
    containerStyle: { backgroundColor: '#111' },
    cropAreaStyle: { border: '2px solid white' },
    mediaStyle: { opacity: 0.95 },
  }}
/>

Use classes when you want CSS control:

<Cropper
  classes={{
    containerClassName: 'cropper',
    cropAreaClassName: 'cropper-area',
    mediaClassName: 'cropper-media',
  }}
/>