如何更改mdc-select下拉箭头的颜色？

Question

我正在尝试更改mdc-select中下拉箭头的默认紫色：

没有任何SASS混合可以做到。

应该如何实现？

以下是我已经尝试过的：

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(red);
    // @include mdc-select-container-fill-color(red);
    @include mdc-select-label-color(red);
    @include mdc-select-focused-label-color(red);
    @include mdc-select-bottom-line-color(red);
    @include mdc-select-focused-bottom-line-color(red);
    @include mdc-select-hover-bottom-line-color(red);
    @include mdc-select-outline-color(red);
    @include mdc-select-focused-outline-color(red);
    @include mdc-select-hover-outline-color(red);
    @include mdc-select-icon-color(red);
}

TS

import { MDCSelect } from '@material/select';
const select = new MDCSelect(document.querySelector('.mdc-select'));

- nuxibyte

Answer 1

这不是图标或字体，这个箭头是 .mdc-select--focused .mdc-select__dropdown-icon 类的背景图像。您可以使用 filter CSS 属性更改图像颜色。

filter: hue-rotate(60deg);

将此CSS应用于您的自定义CSS，为类.mdc-select--focused .mdc-select__dropdown-icon，它会起作用。

谢谢。

- KuldipKoradia

---

完美。谢谢！ - nuxibyte

仅供记录，以防其他人在搜索类似内容时出现在这里，我只是以红色作为问题的示例，认为所有颜色都是相同的。实际上，我想将下拉箭头变成灰色，我找到了 filter: grayscale(1); 这个方法对我有用。再次感谢。我不知道 CSS 滤镜。 - nuxibyte

Answer 2

我使用了一个MDC内部的Sass mixin： mdc-select-dd-arrow-svg-bg_，成功地对其进行了主题化。以下是一个示例：

.mdc-select .mdc-select__dropdown-icon {
    @include mdc-select-dd-arrow-svg-bg_(COLOR, 1);
}

其中COLOR是MDC主题属性（例如'secondary'）或HTML颜色（例如#ff0000）。它不能是变量，因为正如@KuldipKoradia所指出的那样，在编译时生成SVG。

- Stéphane Magnenat

Answer 3

最简单的方法是隐藏SVG，通过CSS创建自己的下拉箭头（无需更改HTML）。然后您可以随时轻松更改颜色：

.mdc-select__dropdown-icon{
  background: none;
  width: 0;
  height: 0;
  bottom: 24px;
  right: 10px;  
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #333333;
}
.mdc-select--activated .mdc-select__dropdown-icon,
.mdc-select--focused .mdc-select__dropdown-icon {
  border-top: 5px solid #FF0000;
}

- Heath