更改 Materializecss 选择文本颜色

【问题标题】：Changing Materializecss select text colors更改 Materializecss 选择文本颜色
【发布时间】：2020-11-23 15:55:50
【问题描述】：

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

在第一个组件的样式中，我可以使用这个 css 将选择文本颜色更改为白色

.select-dropdown{
  color:white;
}

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

.select-dropdown{
  color: black;
}

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

如果我在样式标签中添加“作用域”，.select-dropdown css 似乎会被忽略。

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

【问题讨论】：

标签： vue.js materialize

【解决方案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。我喜欢在包装选择的input-field 上放置一个类名-Materialize 不使用本机select，它隐藏它并用text-input 和dropdown 替换它-因此将类名添加到选择中本身不起作用：

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

【讨论】：