離子離子重新排序鍵斷裂設計

Question

我曾經在一個模式的看法

<ion-list show-reorder="true" style="margin: 0; padding: 0"> 
    <ion-item ng-repeat="widget in allWidgets" class="widgetList" style="vertical-align: middle"> 

    <div class="widgetListContainer item item-icon-right"> 
     <div class="widgetListPictureContainer"> 
     <img src="{{widget.icon}}" class="widgetListPicture"/> 
     </div> 
     <div class="widgetListText"> 
     {{widget.title}} 
     </div> 
    </div> 

    <ion-reorder-button></ion-reorder-button> 
    </ion-item> 
</ion-list> 

而CSS下面的代碼

.widgetListContainer{ 
    display: table; 
    width: 100%; 
    color: white; 
    background-color: black; 
    border: 0; 
    margin: 0; 
    padding: 0; 
} 
.widgetListPictureContainer{ 
    display: table-cell; 
    vertical-align: middle; 
    width: 25%; 

} 

.widgetListPicture{ 
    display: table-cell; 
    height: 20px; 
} 

.widgetListText{ 
    display: table-cell; 
    vertical-align: middle; 
} 

.widgetIconContainer { 
    width:100%; 
    margin-bottom:5px; 
} 

名單和項目都應該是在一個黑暗的顏色。但是，該行顯示爲白色。 奇怪的是，如果我刪除，列表顯示正確。 它似乎正在打破設計，並以某種方式將所有內容着色爲白色，儘管在CSS中設置不同。

我能做些什麼來解決這個問題？

Answer 1

我找到了解決方案。 當添加重新排序按鈕以確保離子項目和按鈕的內容有足夠的空間時，它看起來像離子框架將離子項目的內容包裹在另一個div中。 所以這「總結格」的設計已被覆蓋

.item-content { 
    background-color: #212121 !important; 
} 

Answer 2

太好了！ 對於我來說，我使用下面的代碼來爲我的列表可以改變顏色。 它的工作！

.item-content { 
    background-color:inherit !important; 
}