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

时间:2018-05-08 15:05:36

标签: angularjs material-design angular-material

我正在为我的应用程序使用AngularJS和Material Design。在应用程序中,我有一个__expose_method元素:

md-menu

“材质设计”在菜单内第一个按钮的背景上设置颜色。这也是他们在演示>中的表现。 https://material.angularjs.org/latest/demo/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>

我的CSS的根本不起作用。所以我认为css被覆盖了。但我无法检查CSS选择器的按钮的初始状态(具有材质颜色背景的状态),因为只要我暂停浏览器(F8),背景颜色就会被删除。

任何人都有这方面的经验吗?

//编辑//

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

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

所以看起来我在自己的代码中遇到了CSS问题。

1 个答案:

答案 0 :(得分:0)

这似乎在网站上发挥作用: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;
}