Обрезать изображение с помощью реакции - настроить стиль реагирования-легко-обрезать ⇐ CSS

[Anonymous]

Я пытаюсь создать очень простой компонент реагирования, который обрезал бы изображения с помощью React-Easy-Crop. По-видимому, можно настроить стиль модуля реагирования-easy-crop с помощью свойства style, которое принимает 3 объекта:ContainerStyle, mediaStyle и CropAreaStyle.Это макет по умолчанию:


Я хочу расширить область обрезки на всю ширину контейнера и разместить в ней медиафайлы по высоте (чтобы мы не видели часть исходного изображения за пределами области обрезки) но не могу понять, как это сделать. Объект CropAreaStyle, похоже, не влияет на ширину или высоту, поскольку он рассчитывается и вставляется в файл модуля (даже после установки для параметра DisableAutomaticStylesInjection значения true).

Код: Выделить всё

import React from 'react'
import ReactDOM from 'react-dom'
import Cropper from 'react-easy-crop'
import './styles.css'

class App extends React.Component {
state = {
imageSrc:
'https://img.huffingtonpost.com/asset/5ab4d4ac2000007d06eb2c56.jpeg?cache=sih0jwle4e&ops=1910_1000',
crop: { x: 0, y: 0 },
zoom: 1,
aspect: 1 / 1,
style: {  containerStyle: { position: "absolute", top: "0", width: "calc(100% - 2px)", height: window.innerWidth, overflow: "hidden", border: "1px solid black" },
mediaStyle: { height: "100%", display: "block" },
cropAreaStyle: {position: "absolute", top: "0", border: "1px solid black", width: "100%", height: "100%" }}
}

onCropChange = (crop) => {
this.setState({ crop })
}

onCropComplete = (croppedArea, croppedAreaPixels) => {
console.log(croppedArea, croppedAreaPixels)
}

onZoomChange = (zoom) => {
this.setState({ zoom })
}

render() {
return (





)
}
}

const rootElement = document.getElementById('root')
ReactDOM.render(, rootElement)

Вот чего я пытаюсь достичь:
[img]https://i .sstatic.net/diZYH.png[/img]

Черный квадрат — это область обрезки, размер которой я не могу изменить...
Я хочу область обрезки оставаться честным.
Есть ли простой способ сделать это это без изменения файла модуля?
Решение с другим модулем тоже приемлемо
Заранее спасибо

Подробнее здесь: https://stackoverflow.com/questions/711 ... op-styling