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

Posted 2023-02-25

【中文标题】如何在反应裁剪组件上显示图标？

【英文标题】：How to display an icon over the react crop conponent?

【发布时间】：2021-09-18 05:50:28

【问题描述】：

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

这是我的带有反应裁剪组件的代码：

    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;

任何帮助将不胜感激！

【参考方案1】：

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

.your-class 
    z-index: 10;