javascript - 如何完全自定义 Angular Material Subheader 组件？

Question

您好，我对如何设置 Angular Material 组件( Angular 1.4)的样式感到很困惑。

我基本上是从这里的 Material 站点获取源代码并将其放入我的元素中:

https://material.angularjs.org/latest/demo/subheader

我想要一个带有粘性标题的列表，所以这个组件非常完美。但是，我需要不同的颜色——非常不同。

例如，我需要背景为透明的深灰色，文字为浅灰色。

如果可能的话，我也想更改滚动条拇指的颜色。那么，这有可能吗？我尝试使用自定义主题，但它似乎只影响标题颜色。

Answer 1

如果您下载了整个包，您将在/modules/closure 中找到所有组件的目录列表。在 subheader 文件夹中，您可以找到 subheader-default-theme.css 文件。

.md-subheader.md-THEME_NAME-theme {
color: '{{ foreground-2-0.23 }}';
background-color: '{{background-color}}'; }
.md-subheader.md-THEME_NAME-theme.md-primary {
 color: '{{primary-color}}'; }
.md-subheader.md-THEME_NAME-theme.md-accent {
 color: '{{accent-color}}'; }
.md-subheader.md-THEME_NAME-theme.md-warn {
 color: '{{warn-color}}'; }

将其添加到您的 material_custom.css

将这些设置为您喜欢的值，然后在您需要的元素上使用 md-THEME_NAME_YOU_CHOOSE。

如果您需要进一步的样式，请检查元素并在您已经设置的主题中添加样式。