無法更改離子性側面菜單的背景

Question

我正在嘗試將某些CSS應用於離子型側面菜單的背景。 我的CSS很簡單：

 .my-menu-item { background-color: blue !important; color: white !important } 

我已將這種樣式應用於離子含量，離子列表，離子項目和離子側菜單。 而且，從來沒有任何菜單項具有藍色背景。

有沒有辦法做到這一點？ 如果可以，怎么辦？

這是我的html代碼：

 <ion-side-menus enable-menu-with-back-views="false"> <ion-side-menu-content> <ion-nav-bar class="header-text"> <!-- removed bar-stable --> <ion-nav-back-button> </ion-nav-back-button> <ion-nav-buttons side="left"> <button class="button button-icon button-clear" menu-toggle="left"> <i class="icon header-bar-icon ion-navicon"></i> </button> </ion-nav-buttons> <ion-nav-buttons side="right"> <button class="button button-icon button-clear" ng-click="shareAnywhere()"> <i class="icon header-bar-icon ion-ios-upload-outline"></i> </button> </ion-nav-buttons> </ion-nav-bar> <ion-nav-view name="menuContent"></ion-nav-view> </ion-side-menu-content> <ion-side-menu class="my-menu-item" side="left"> <ion-header-bar class="bar-stable"> <h1 id="menu-heading">MENU</h1> </ion-header-bar> <ion-content class="my-menu-item"> <ion-list class="my-menu-item"> <ion-item class="my-menu-item" menu-close href="#/app/discover"> <span class="menu-style">DISCOVER MOVIES</span> </ion-item> <ion-item class="my-menu-item" menu-close href="#/app/watchlist"> WATCH LIST </ion-item> <ion-item class="my-menu-item" menu-close href="#/app/home"> TUTORIAL </ion-item> <ion-item class="my-menu-item" menu-close href="#/app/friends"> FRIENDS </ion-item> <!-- <ion-item class="item-icon-right" nav-clear menu-close href="#/app/test"> TEST </ion-item> --> <ion-item class="my-menu-item" menu-close href="#/app/news"> NEWS </ion-item> <ion-item class="my-menu-item" menu-close href="#/app/settings"> SETTINGS </ion-item> <ion-item class="my-menu-item" menu-close ng-click="logoutUser()"> SIGN OUT </ion-item> </ion-list> </ion-content> </ion-side-menu> </ion-side-menus> 

Answer 1

您不需要在離子項目元素內部使用一些“跨度”。 但是您需要將樣式應用於離子項目> a元素。

這是我的一個項目的一些代碼：

<ion-content>
    <ion-list>
        <ion-item ui-sref=".c1" ui-sref-active="active">1. Y</ion-item>
        <ion-item ui-sref=".c2" ui-sref-active="active">2. O</ion-item>
        <ion-item ui-sref=".c3" ui-sref-active="active">3. D</ion-item>
        <ion-item ui-sref=".c4" ui-sref-active="active">4. N</ion-item>
    </ion-list>
</ion-content>

和SASS（ 這里我覆蓋了“活動的”離子項目的子元素（元素）的背景色 ）

    ion-list {
        ion-item {
            &.active a {
                background-color: $darkYellow !important;
                color: #fff;
            }
        }
    }

或在CSS中：（ 假設您將classcolouredList添加到了ion-list中 ）

ion-list.coloredList ion-item.active  a {
    background-color: red !important; 
}

使用修改后的HTML，以便不給所有離子列表上色。

<ion-list class="coloredList"> ... </ion-list>