如何使用css媒体查询隐藏以编程方式添加的html元素？

Question

在我的视图初始化后，我使用javascript在我的谷歌地图区域添加一个按钮：

let centerControlDiv: any = document.createElement('div');
centerControlDiv.className = 'collapseButton'; //trying to hide it by css
let controlUI = document.createElement('div');
centerControlDiv.appendChild(controlUI);

this.controlText = document.createElement('button');
this.controlText.innerHTML = '<i class="fa fa-angle-double-down" aria-hidden="true"></i>';
controlUI.appendChild(this.controlText);

map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(centerControlDiv);

但是，我想只在小屏幕上显示按钮。因此我添加了以下媒体查询：

  @media (min-width: 0px) and (max-width: 992px) {
    .collapseButton {
      display: block  !important;
    }
    /* show it on small screens */
  }

  @media (min-width: 993px) {
    .collapseButton {
      display: none  !important;
    }
    /* hide it elsewhere */
  }

出于某种原因，这不起作用。如果我做：

document.getElementsByClassName("collapseButton")[0].style.display = 'none';

按钮成功隐藏。我错过了什么？

更新：这里是剪辑的DOM，包括按钮：

Answer 1

我终于找到了解决方案：

@media (min-width: 0px) and (max-width: 992px) {
  /deep/.collapseButton {
    display: block;
  }
  /* show it on small screens */
}

@media (min-width: 993px) {
  /deep/.collapseButton {
    display: none;
  }
  /* hide it elsewhere */
}

添加/deep/使它工作。仍然不确定为什么我必须添加这个。任何解释都表示赞赏。