2

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

这是我的反应作物组件的代码：

    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;
}

任何帮助，将不胜感激！

4

1 回答 1

1

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

.your-class {
    z-index: 10;
}
于 2021-09-18T06:10:20.277 回答