Изменение свойства md-subheader-inner css

Question

Я пытаюсь удалить отступы: 16px; свойство, которое md-subheader-inner наследует от директивы md-subheader.

Проблема в том, что при применении другого класса к моему подзаголовку кажется, что я не могу изменить свойства внутреннего стиля. Я сделал codepen, пытаясь показать, в чем проблема здесь .

Всякий раз, когда я проверяю элемент, не имеет значения, какое из двух решений, которые я принял, свойства css не обновляются ... Я думаю, что мне здесь не хватает чего-то очевидного, но я не могу понять, что это такое .

Обратите внимание, что я не хочу использовать прямое изменение в классе md-subheader, потому что я использую эту директиву во многих местах, и я не хочу никаких побочных эффектов (отсюда мой «padding-less-inner» класс).

Html

<md-select name="test" multiple="true" ng-model="whatever">
<md-subheader class="md-sticky padding-less-inner">
  <md-input-container style="width:100%;padding-left:8px;padding-right: 24px;margin-bottom: 0px;">
    <input style="width: calc(100% - 30px);float: right;" ng-model="searchText" class="_md-text" onkeydown="stopPropagation(event)">
  </md-input-container>
</md-subheader>
<md-optgroup>
  <md-option ng-value="item.id" ng-repeat="item in querySearch()">{{item.name_fr}}</md-option>
</md-optgroup>

CSS

.padding-less-inner {
    .md-subheader-inner {
        padding: 0 !important;
    }
    /*div {
         padding: 0 !important;        
    }*/
}

Answer 1

Я сделал небольшую модификацию вашего CSS:

.padding-less-inner .md-subheader-inner {
    padding: 0 !important;
}