MDL：改变不确定进度条的颜色？

Question

如何更改 Material Design Lite 中不确定进度条的颜色？

我希望栏使用我调用时选择的强调色（粉红色）

    <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">

这是当前进度条的行：

<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate" style="width: 100%"></div>

我曾尝试将 mdl-color--pink-500 和 mdl-color-text--pink-500 添加到课程中，但无济于事。

Answer 1

遇到了同样的问题。显然mdl-progress使用主题颜色进行显示并且没有直接的方法来改变它。我最终创建了一个额外的类mdl-progress-red，我将它附加到mdl-progress唯一的类，以便我可以设置子元素的颜色。下面是 red 的 CSS rgb(255,0,0)。如果您想更改颜色，只需rgb(255,0,0)在下面的样式中随处替换为您想要的颜色即可。

.mdl-progress-red > .progressbar {
    background-color: rgb(255,0,0);
}

.mdl-progress-red > .bufferbar {
    background-image: linear-gradient(to right, rgba(255,255,255, 0.7), rgba(255,255,255, 0.7)), linear-gradient(to right, rgb(255,0,0), rgb(255,0,0));
}

.mdl-progress-red > .auxbar {
    background-image: linear-gradient(to right, rgba(255,255,255, 0.9), rgba(255,255,255, 0.9)), linear-gradient(to right, rgb(255,0,0), rgb(255,0,0));
}

然后，要将颜色应用到进度条 - 您只需指定新的类名，如下所示：

<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate mdl-progress-red" style="width: 100%"></div>