时间戳

首页 > 解决方案 > 删除菜单中的初始背景颜色第一个 md 按钮

angularjs - 删除菜单中的初始背景颜色第一个 md 按钮

问题描述

我正在为我的应用程序使用 AngularJS 和 Material Design。在应用程序中，我有一个md-menu元素：

<md-menu md-position-mode="target-right target" md-offset="0 42">
    <md-button class="md-icon-button rounded dtp-btn-ok" ng-click="$mdMenu.open($event);">
        <i class="material-icons">more_horiz</i>
    </md-button>
    <md-menu-content class="person-popup contact-popup">
        <md-card md-theme-watch>
            <md-card-title>
                <md-card-title-text>
                    <span class="md-headline">Headline</span>
                    <span class="md-subhead">Subhead informatie</span>
                </md-card-title-text>
            </md-card-title>
            <md-card-actions layout="row" layout-align="end center">
                <md-button title="Title informatie" class="md-icon-button icon-margin">
                    <i class="material-icons">phone</i>
                </md-button>
                <md-button title="Title informatie" class="md-icon-button icon-margin">
                    <i class="material-icons">email</i>
                </md-button>
                <md-button title="Title informatie" class="md-icon-button icon-margin">
                    <i class="material-icons">forward</i>
                </md-button>
            </md-card-actions>
        </md-card>
    </md-menu-content>
</md-menu>

Material Design 在菜单内的第一个按钮的背景上设置颜色。这也是他们在演示 > https://material.angularjs.org/latest/demo/menu中的做法。

我想删除它或覆盖它。

添加：

.md-button {
    background-color: #fff!important;
}

我的CSS的根不起作用。所以我认为css被覆盖了。但是我无法检查 CSS 选择器以了解按钮的初始状态（具有 Material 颜色背景的那个），因为一旦我暂停浏览器（F8），背景颜色就会被删除。

有人有这方面的经验吗？

// 编辑 //

使用基本的 codepen AngularJS/Material Design 我重新创建了我的情况。它似乎可以使用相同的代码在那里工作。

https://codepen.io/anon/pen/LmQNzv

所以看起来我自己的代码中的某个地方有 CSS 问题。

标签： angularjsmaterial-designangular-material

解决方案

这似乎在网站上工作：https ://material.angularjs.org/latest/demo/menu

.md-button:first-child {
    background-color: #fff !important;
}

或者，您可以尝试使用更高的特异性来进一步覆盖：

md-card-actions>.md-button:first-child {
    background-color: #fff !important;
}

推荐阅读