更改 Materializecss select 文本颜色

Question

我在两个单独的 vue.js 组件中使用 Materaliizecss select。在一个组件中，我希望 select 文本颜色为白色，在另一个组件中，我希望 select 文本颜色为黑色。

在第一个组件的样式中，我可以使用 css

将 select 文本颜色更改为白色

.select-dropdown{
  color:white;
}

不幸的是，这使得两个组件中的 select 文本颜色变为白色！所以在我的第二个组件中，我放置了这个 css

.select-dropdown{
  color: black;
}

现在两个组件的 select 文本颜色都是黑色。

如果我将“scoped”添加到样式标签中，.select-dropdown css 似乎会被忽略。

关于如何更改一个组件中的 Materaliizecss select 文本颜色以使其不影响其他组件的任何建议？

Answer 1

那么，一点物化理论：

// Color of the chosen item

.select-dropdown{
  color: firebrick;
}

// color of the dropdown options

.dropdown-content li>a, .dropdown-content li>span {
    color: firebrick;
}

现在，我们需要更具体地定位个人 select。我喜欢在包裹 select 的 input-field 上放置一个 class 名称 - Materialise 不使用本机 select，它隐藏它并用 [= 替换它15=] 和 dropdown - 因此将 class 名称添加到 select 本身是行不通的：

<div class="blue-select input-field">
    <select></select>
</div>

// Add a class to the wrapping input-field

.input-field.blue-select .select-dropdown{
  color: steelblue;
}

.input-field.blue-select .dropdown-content li>a,
.input-field.blue-select .dropdown-content li>span {
    color: steelblue;
}

Codepen.

更改 Materializecss select 文本颜色

Changing Materializecss select text colors

materialize

vue.js