如何在 Angular4 中使用 Scss 将样式设置为 ng-select 框

Question

我的 HTML 中有一个 ng-select 字段，我想将 css 的某些部分应用到该字段，这里我使用的是 scss，我不知道如何将这些代码与我给出的类交叉，谁能帮我排序出来。

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;
  select-dropdown {
    display: none;
  }
}

HTML：

<ng-select class="box" placeholder="Wiredelta" [options]="cities">Wiredelta</ng-select>

要添加到 scss 的 CSS 部分：

    ng-select > div > div.single > div.toggle {
    color: white !important;
    background: none;
}

ng-select > div {
    border:none !important
}

ng-select > div > div.single > div.placeholder {
    color: white;
    font-size: 35px;
    font-family: MontserratRegular; 
}

ng-select > div > div.single > div.clear:hover, ng-select > div > div.single > div.toggle:hover {
    background-color: #4389a9;
}

select-dropdown {
    display: none;
}

Answer 1

笔记：

如果您使用的是angular cli，则添加component scss文件将无法正常工作。要使其工作，请将它们添加到styles.scss

这是你需要的scss，

ng-select {
    >div {
        >div.single {
            >div.toggle {
                color: white !important;
                background: none;
                &:hover {
                    background-color: #4389a9;
                }
            }
            >div.placeholder {
                color: white;
                font-size: 35px;
                font-family: MontserratRegular;
            }
            >div.clear {
                &:hover {
                    background-color: #4389a9;
                }
            }
        }
        border: none !important;
    }
}
select-dropdown {
    display: none;
}