使用 Angular 2 物化指令中的物化来设计物化选择答案

【问题标题】：Styling materialize select with materialize from angular 2 materialize directive使用 Angular 2 物化指令中的物化来设计物化选择
【发布时间】：2016-10-07 14:02:32
【问题描述】：

我正在尝试设置具体化 css 创建的选择框的输入字段的样式。我正在使用 angular 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 中使用的选择器似乎没有响应。

我已经能够通过在父元素上设置字体来调整字体，但是我被物化 js 生成的 select-wrapper 元素卡住了，而且我使用的 css 选择器似乎也被覆盖了。

知道如何有效地设置输入元素的样式吗？

【问题讨论】：

您有任何可行的解决方案。我有同样的问题

标签： css angular sass materialize

【解决方案1】：

我遇到了同样的问题。就我而言，我试图在 component.style.css 文件中添加样式，但它没有任何效果，然后我尝试将其添加到 main 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>

【讨论】：