Как удалить дополнение из элемента списка объектов?

Question

У меня есть список с сгруппированными объектами в нем. Like here in the Explored App, нажмите «Образцы». Теперь каждый из этих предметов имеет отступы 1rem, заданные css с селектором .sapMLIB.sapMObjLItem.

Теперь я хотел бы уменьшить верхние и нижние отступы к 0.25rem, поэтому я добавил класс объекта и импортировать пользовательские CSS (через manifest.json), все, как описано in the Walkthrough. Это не сработало, так как обычный css перезаписывает мой собственный.

Другой пример: добавить класс sapUiNoContentPadding к элементам, но также и правила css, которые будут перезаписаны правилами, описанными в первом абзаце.

Что я делаю неправильно? как удалить это дополнение без перезаписи рендеринга?

MyView:

<mvc:View 
    controllerName="sap.ui.xxxx.someapp.controller.MyList" 
    xmlns="sap.m" 
    xmlns:mvc="sap.ui.core.mvc"> 
    <StandardListItem title="Titel"/> 
    <List class="sapUiResponsiveMargin sapUiNoContentPadding" 
    width="auto" 
    items="{path : '//elementsSet', 
     sorter : { 
     path : 'attribute1}', 
     group : true 
     } 
    }"> 
    <items> 
     <ObjectListItem title="{= ${attribute1} === '' ? 'Enter Text Please' : ${attribute1}}" 
     icon="{= ${attribute1} === '' ? 'sap-icon://alert' : 'sap-icon://sys-enter'}" 
     number="{attribute4}" 
     numberUnit="$" 
     numberState="{= ${attribute4} > 10 ? 'Error' : 'Success' }" 
     type="Active" press="onItemPress" 
     markFlagged="true" markFavorite="true" 
     showMarkers="true" 
     class="sapUiNoContentPadding myownclassforpadding"> 
     <firstStatus> 
      <ObjectStatus 
      text="some text" /> 
     </firstStatus> 
     <attributes> 
     <ObjectAttribute text="{attribute1}" visible="false"/> 
     <ObjectAttribute text="{attribute2}"/> 
     <ObjectAttribute text="{attribute3}" visible="false"/> 
     <ObjectAttribute text="{attribute4}" visible="false"/> 
     </attributes> 
     </ObjectListItem> 
    </items> 
    </List> 
</mvc:View> 

мой CSS

.myownclassforpadding{ 
    padding: 0; 
    background-color: green; 
} 

Answer 1

Вашего CSS класс myownclassforpadding не будет использоваться, поскольку CSS из библиотеки более конкретно, как он использует два класса sapMLIB и sapMObjLItem. Вы можете сделать CSS более конкретно так:

.sapMLIB.sapMObjLItem.myownclassforpadding{ 
    padding: 0; 
    background-color: green; 
} 

взглянуть на JSBin example.

Answer 2

Попробуйте ниже селектор, чтобы переопределить по умолчанию CSS.

.sapMLIB.sapMObjLItem.myownclassforpadding{ 
    padding-top: 0.25rem; 
    padding-bottom: 0.25rem; 
    background-color: green; 
}