使用 Angular Material Design 的主题按钮文本

Question

我想使用$mdThemingProvider 使用自定义调色板对我网站上的所有按钮进行通用配置。我可以通过在调色板中配置A200 和A700 来操作按钮的背景颜色。我还想更改默认文本颜色。我已经与contrastDefaultColor、contrastLightColors 和contrastDarkColors 混在一起了，但我能做的最好的就是得到黑色或白色文本。

以下代码段将生成带有深色文本的白色按钮：

var lightGrey = $mdThemingProvider.extendPalette('grey', {
  'A200': '#fefefe', // Element background color (default)
  'A700': '#fefefe', // Element hover background color (default)
  'contrastDefaultColor': 'dark',
  'contrastLightColors': '600 700 800 900'
});
$mdThemingProvider.definePalette('light-grey', lightGrey);

$mdThemingProvider.theme('default')
  // Accent palette controls buttons, links, etc
  .accentPalette('light-grey');

将contrastDefaultColor 更改为“浅色”会使文本变为白色。

我可以通过覆盖生成的样式表的规则来手动实现我想要的效果：

.md-button.md-default-theme.md-fab {
  color: #bdc3c7;
}

...但我正在尝试使用库中提供的工具。

Answer 1

我不知道您为什么会遇到这个问题，但是通过为 A200 和 A700 提供您想要提供的颜色将解决问题。像这样：

var lightGrey = $mdThemingProvider.extendPalette('grey', {
  'A200': '#bdc3c7', // Element background color (default)
  'A700': '#bdc3c7', // Element hover background color (default)
  'contrastDefaultColor': 'dark',
  'contrastLightColors': ['600', '700', '800', '900']
});

注意：尽量以数组形式给出对比调色板。

如果你遇到一些不同的问题，请更新或者你可以参考这个link