Question

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

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

.select-dropdown{
  color:white;
}

不幸的是，这会使两个部分的选择文本颜色变为白色！因此，在第二个组件中，我放置了此CSS

.select-dropdown{
  color: black;
}

现在两个组件的选择文本颜色均为黑色。

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

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

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。我喜欢在包装选择的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。

更改Materializecss选择文本颜色

1 个答案: