Changing Materializecss select text colors

Question

I'm using Materaliizecss select in two separate vue.js components. In one component I want the select text color to be white, the other component I want the select text color to be black.

In the first component's style I can change the select text color to white by using this css

.select-dropdown{
  color:white;
}

Unfortunately, this makes the select text color white in both components! So in my second component's I've placed this css

.select-dropdown{
  color: black;
}

Now both component's select text colors are black.

If I add "scoped" to the style tag the .select-dropdown css seems to be ignored.

Any suggestions as to how to change the Materaliizecss select text color in one component such that it does not affect other components?

Answer 1

So, a little Materialize theory:

// Color of the chosen item

.select-dropdown{
  color: firebrick;
}

// color of the dropdown options

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

Now, we need to be more specific to target an individual select. I like to put a classname on the input-field that wraps the select - Materialize doesn't use the native select, it hides it and replaces it with a text-input and dropdown - so adding class names to the select itself wouldn't work:

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