如何在反应裁剪组件上显示图标？

Question

我在反应作物组件上显示图标时遇到问题。当我删除 react crop 组件时，我可以看到图标（撤消按钮）。否则它似乎在作物成分下。

这是我的代码与 react crop 组件：

    return (
      <div>
         <div className="webcamCapture">
        { campic}
        </div>
        { buttons}
       
        {this.state.imageData && (
          <>
        {src && (
           <div className="preview">
          <ReactCrop
            src={src}
            crop={crop}
            ruleOfThirds
            onImageLoaded={this.onImageLoaded}
            onComplete={this.onCropComplete}
            onChange={this.onCropChange}
          />
          </div>
        )}
         </>
        )}
      </div>
    )

这是我想在反应作物上显示的图标组件：

        <div className="preview">
        <div > 
        <FontAwesomeIcon className="preview__close" icon={faChevronLeft} onClick={() => this.setState({ imageData: null })}/>
       </div>
       </div>

这是我的 CSS 代码：

.preview {
    position: relative;
}

.preview__close {
    position: absolute;
    top: 0;
    margin: 5px;
    cursor: pointer;
    color: red;
}

如有任何帮助，我们将不胜感激！

Answer 1

正如我在评论中所述，您需要将 zIndex 添加到您的组件之一。比方说：

.your-class {
    z-index: 10;
}

如何在反应裁剪组件上显示图标？

How to display an icon over the react crop conponent?

javascript

css

webcam

crop

reactjs