如何将自定义 CSS 应用于 Angular Material md-contact-chips

Question

我正在尝试将特定的CCS应用于Angular Material中的一个md-contact-chips。这是一段 HTML：

<div class="col-xs-10 col-xs-offset-1" style="height:20%;background:rgb(255, 255, 255);border-radius: 20px;border: 3px solid #A3AB45;margin-bottom:20px">
            <md-contact-chips id="transform-tags"
                              ng-model="contacts"
                              md-contacts="querySearch($query)"
                              md-contact-name="name"
                              md-contact-image="image"
                              md-contact-email="email"
                              md-require-match="true"
                              md-highlight-flags="i"
                              filter-selected="filterSelected"
                              placeholder="Categories">
            </md-contact-chips>
        </div>

这是CCS代码：

.md-chips.md-focused {
    box-shadow: none !important;
}
.md-chips {
    box-shadow: none !important;
}

这按预期工作，但它被应用于所有md-contact-chips，我只想将其应用于 id transform-tags 的那个，所以我以这种方式修改CCS：

#transform-tags.md-chips.md-focused {
    box-shadow: none !important;
}
#transform-tags.md-chips {
    box-shadow: none !important;
}

但是当我这样做时，CCS不再应用了！我需要做一些技巧才能将CCS应用于Angular Material元素吗？

Answer 1

试试这个：

#transform-tags md-chips .md-chips
{
    box-shadow: none;
}

希望这有帮助。