如何在Angular4中使用SCSS为ng-select组件设置样式

我来帮你搞定这个ng-select的样式关联问题～ 你遇到的核心问题是Angular的视图封装机制在搞鬼——默认情况下，父组件的样式是无法渗透到像ng-select这样的第三方组件内部DOM的，所以你写的.select-dropdown选择器根本找不到目标元素。

给你调整后的SCSS代码，直接用就能生效：

.box { 
  background-color: #4389a9; 
  width: 185px; 
  height: 45px; 
  padding: 8px 20px; 
  right: -19px; 
  cursor: pointer; 
  top: 19px; 
  transition: bottom 2s; 
  border-radius: 24px; 
  margin-bottom: 26px; 

  /* 用::ng-deep穿透到ng-select内部元素，绑定.box避免样式污染 */
  &::ng-deep .select-dropdown { 
    display: none; 
  }

  /* 补充：如果是要隐藏ng-select默认的下拉面板，用这个类名 */
  // &::ng-deep .ng-dropdown-panel {
  //   display: none;
  // }
}

关键说明： #

• &::ng-deep是Angular提供的样式穿透语法，它能让你的样式突破视图封装，作用到ng-select内部的DOM节点上。而且和.box绑定后，只会影响带有.box类的ng-select，不会污染页面上其他的ng-select组件。
• 注意检查.select-dropdown是不是你要找的正确类名：ng-select默认的下拉面板类是.ng-dropdown-panel，如果是你自定义的类名，就保留原来的；如果是默认控件的下拉，就换成注释里的选择器。
• 确保你的组件没有手动关闭视图封装（默认是ViewEncapsulation.Emulated，不需要改），关闭封装会导致样式全局扩散，不推荐。

内容的提问来源于stack exchange，提问作者Bhrungarajni