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

Question

我的视图初始化后，我使用javascript：

在我的Google地图区域添加了一个按钮

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/使其有效。仍然不确定为什么我必须添加这个。任何解释都表示赞赏。