如何将自定义 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;
}

希望对您有所帮助。

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

How to apply custom CSS to Angular Material md-contact-chips

css

angularjs

angular-material