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

【问题标题】：Remove initial background-color first md-button in menu删除菜单中的初始背景颜色第一个 md 按钮
【发布时间】：2018-05-08 15:05:35
【问题描述】：

我正在为我的应用程序使用 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 问题。

【问题讨论】：

标签： angularjs material-design angular-material

【解决方案1】：

这似乎在网站上有效：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;
}

【讨论】：

【解决方案2】：

这里的问题是 Material Design 在 md-menu 中的第一个 md-button 中添加了一个 md-focus 类。

这个指令应该可以工作：

.directive('mdPreventFocus', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs, $mdOpenMenu) {
            scope.$on('$mdMenuOpen', function(ev, element) {
                const interval = setInterval(function() {
                    if (document.getElementsByClassName('md-clickable').length > 0 && document.getElementsByClassName('md-clickable')[0].querySelector('.md-focused')) {
                        document.getElementsByClassName('md-clickable')[0].querySelector('.md-focused').classList.remove('md-focused');
                        clearInterval(interval);
                    }
                }, 5);
            });
        }
    }
})

【讨论】：