如何自定义Angular Material的input/md-input-container组件？

Question

如标题中所述,我如何自定义这些元素？它们似乎使用透明背景,这在大多数背景调色板上很难查看

Answer 1

在"angular-material.css"之后添加一个空白css文件,并在该空白css文件中覆盖您要自定义的规则.

对于您面临的问题,我在custom.css中添加了以下规则.

md-input-container.md-default-theme label, 
 md-input-container.md-default-theme .md-placeholder{
    color:grey !important;
}

在这里你可以改变color或随意改变background-color.

Answer 2

我建议使用调色板配置:

    app.config(function($mdThemingProvider) {

        //change default color for primary
        var indigo = $mdThemingProvider.extendPalette('indigo', {
            '500': '569fd4'
        });
        $mdThemingProvider.definePalette('indigo', indigo);

        //change default color for warn
        var indigo = $mdThemingProvider.extendPalette('red', {
            '500': 'ff5800'
        });
        $mdThemingProvider.definePalette('red', indigo);

        $mdThemingProvider.theme('default').primaryPalette('indigo').warnPalette('red');  

        //here you change placeholder/foreground color.
        $mdThemingProvider.theme('default').foregroundPalette[3] = "rgba(0,0,0,0.67)";

});

来源:如何在使用深色主题时为文本设置浅色前景色？