Styling materialize select with materialize from angular 2 materialize директива

Question

Я пытаюсь создать поле ввода поля выбора, которое материализует css. Я использую директиву с угловым разрешением 2. Это то, что мой HTML выглядит следующим образом:

<div class="input-field col s12"> 
    <select id="property-selector" materialize="material_select" name="propertySelector"> 
    <option class="property-option">Address 1, 1000AA Amsterdam, The Netherlands</option> 
    </select> 
</div> 

Это то, что СКС выглядит следующим образом:

#property-selector-card { 
    font-family: 'Roboto', Arial, Helvetica, sans-serif; 
    font-weight: 500; 
    color: #118073; 
    font-size: 17pt; 
    div.select-wrapper { 
    .select-wrapper input.select-dropdown { 
     border-bottom: none !important; 
    } 
    } 
} 

Это генерирует следующий HTML в браузере:

<div _ngcontent-kld-6="" class="card-panel row" id="property-selector-card"> 
    <div _ngcontent-kld-6="" class="input-field col s12"> 
    <div class="select-wrapper initialized"><span class="caret">▼</span> 
     <input type="text" class="select-dropdown" readonly="true" data-activates="select-options-95a42e27-1c84-d800-0534-aaaaeb70c462" value="Address 1, 1000AA Amsterdam, The Netherlands"><ul id="select-options-95a42e27-1c84-d800-0534-aaaaeb70c462" class="dropdown-content select-dropdown "><li class=""><span>Address 1, 1000AA Amsterdam, The Netherlands</span></li></ul> 
     <select _ngcontent-kld-6="" id="property-selector" materialize="material_select" name="propertySelector" ng-reflect-materialize="material_select" class="initialized" 
     <option _ngcontent-kld-6="" class="property-option">Address 1, 1000AA Amsterdam, The Netherlands</option> 
     </select></div> 
    </div> 
</div> 

Теперь я m имеет проблемы, переопределяющие стиль нижнего края (чего я не хочу). Селектор, который я использую в scss, похоже, не отвечает.

Я смог отрегулировать шрифт, установив его на родительский элемент, но я застрял в элементе select-wrapper, который создает материализуемое js, и селектор css, который я использую, также переопределяется, как кажется.

Любая идея, как эффективно стилизовать элемент ввода?

Answer 1

У меня была та же проблема. В моем случае я пытался добавить стиль в файле component.style.css, и он не имел никакого эффекта, затем я попытался добавить его к основному style.css, и он сработал.

Я думаю, что в вашем случае вместо использования id используйте имя класса, чтобы пройти и установить стиль.

.custom-select { 
    div.select-wrapper { 
    .select-wrapper input.select-dropdown { 
     border-bottom: none !important; 
    } 
    } 
} 

и дать имя класса к внешнему DIV из выбора элемента

<div class="input-field col s12 custom-select"> 
    <select id="property-selector" materialize="material_select" name="propertySelector"> 
    <option class="property-option">Address 1, 1000AA Amsterdam, The Netherlands</option> 
    </select> 
</div>