I'm struggling to modify the default purple color of the dropdown arrow in an mdc-select:
https://i.sstatic.net/DdDEv.png
None of the sass mixins seem to be effective in making the change.
Any suggestions on how this can be achieved?
Here are my attempts so far:
HTML
<div class="mdc-select mdc-select--outlined">
<input type="hidden" name="enhanced-select">
<i class="mdc-select__dropdown-icon"></i>
<div class="mdc-select__selected-text" class="mdc-select__selected-text" role="button" aria-haspopup="listbox" aria-labelledby="demo-label"></div>
<div class="mdc-select__menu mdc-menu mdc-menu-surface">
<ul class="mdc-list">
<li class="mdc-list-item" data-value="41" role="option">41</li>
<li class="mdc-list-item" data-value="42" role="option">42</li>
<li class="mdc-list-item" data-value="43" role="option">43</li>
</ul>
</div>
<div class="mdc-notched-outline">
<div class="mdc-notched-outline__leading"></div>
<div class="mdc-notched-outline__notch">
<label class="mdc-floating-label">Answer to Life</label>
</div>
<div class="mdc-notched-outline__trailing"></div>
</div>
</div>
SCSS
@import "@material/list/mdc-list";
@import "@material/menu-surface/mdc-menu-surface";
@import "@material/menu/mdc-menu";
@import "@material/select/mdc-select";
.mdc-select {
@include mdc-select-ink-color(green);
// @include mdc-select-container-fill-color(green);
@include mdc-select-label-color(green);
@include mdc-select-focused-label-color(green);
@include mdc-select-bottom-line-color(green);
@include mdc-select-focused-bottom-line-color(green);
@include mdc-select-hover-bottom-line-color(green);
@include mdc-select-outline-color(green);
@include mdc-select-focused-outline-color(green);
@include mdc-select-hover-outline-color(green);
@include mdc-select-icon-color(green);
}
TS
import { MDCSelect } from '@material/select';
const select = new MDCSelect(document.querySelector('.mdc-select'));