Изменение материализации css выберите цвета текста

Question

Я использую Materaliize css select в двух отдельных компонентах vue. js. В одном компоненте я хочу, чтобы выбранный цвет текста был белым, в другом - я хочу, чтобы выбранный цвет текста был черным.

В стиле первого компонента я могу изменить выбранный цвет текста на белый, используя это css

.select-dropdown{
  color:white;
}

К сожалению, это делает выделенный цвет текста белым в обоих компонентах! Итак, в моем втором компоненте я разместил это css

.select-dropdown{
  color: black;
}

Теперь оба цвета текста для выбора компонентов черные.

Если я добавлю «scoped» к тегу стиля, то .select -dropdown css кажется, игнорируется.

Любые предложения относительно того, как изменить цвет текста Materaliize css в одном компоненте, чтобы он не влиял на другие компоненты?

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;
}

Теперь нам нужно быть более конкретными c, чтобы настроить таргетинг на индивидуума 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 .