スタイリングマテリアライズwith角度2マテリアライズディレクティブ

Question

CSSが作成する選択ボックスの入力フィールドのスタイルを設定しようとしています。私は、角度2のmaterializeディレクティブを使用しています。これは私の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> 

これは、SCSSは、次のようになります。

#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> 

を、私は」ボーダーボトムスタイル（私が望んでいない）をオーバーライドする問題があります。 scssで使用しているセレクタが応答しないようです。

親要素にフォントを設定することでフォントを調整できましたが、マテリアライズjが生成するselect-wrapper要素が残っています。使用するCSSセレクタもオーバーライドされます。

どのように効果的に入力要素をスタイルするか考えてみましょうか？

Answer 1

私は同じ問題がありました。私の場合、私はcomponent.style.cssファイルにスタイルを追加しようとしていましたが、何の効果もありませんでした。そして、それをメインのstyle.cssに追加してみました。

あなたのケースでは、idを使用する代わりに、クラス名を使用してトラバースしてスタイルを設定すると思います。

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

とあなたはどんな作業溶液を得たselect要素

<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>