React：如何在不更改子元素的情况下更改特定的div元素样式？

Question

我有一个组件，其中一个div根表示图像，另一个div子中包含按钮。

这个想法是，通过单击按钮来触发一个功能，该功能可以更改过滤器的状态，但不幸的是，它还会更改按钮的样式。

我该如何解决？

 render() {
    return (
    <div className="main-div">
      <Lightbox
           images={[{src: this.urlFromDto(this.props.dto)}]}
           isOpen={this.state.isExpand}
           onClose={this.closeLightBox}
           showImageCount={false}/>
      <div 
        className="image-root"
        style={{
          backgroundImage: `url(${this.urlFromDto(this.props.dto)})`,
          width: this.state.size + 'px',
          height: this.state.size + 'px',
          filter : this.state.filterType
        }}
        >
        <div>
          <a onClick={this.onClone}><FontAwesome className="image-icon" name="clone" title="clone"/></a>
          <a onClick={this.onFilter}><FontAwesome className="image-icon" name="filter" title="filter"/></a>
          <a onClick={this.onExpand}><FontAwesome className="image-icon" name="expand" title="expand"/></a>
        </div>
      </div>
    </div>