Create a custom theme to override form controls built using Angular Material - Angular 4

Question

I've gone through material.angular.io documentation on build a custom theme & I tried to created a custom theme for overridding the form controls like Md input textbox, text area, md-select, checkbox, radiobutton controls using custom_theme.scss file which has overriding styles for these input controls.

.mat-select-trigger {
    font-size: 12px;
    min-width: 200px;
}

similarly for other form controls to override color, font styles that comes with indigo-pink pre-built theme but it seems my styles are not getting applied.

I've loaded my theme in .angular-cli.json file as below:

  "styles": [
        "styles.css",
        "custom-theme.scss"
  ]

& prebuilt theme of angular material-2.0.0-beta.8 is placed in styles.css..

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

I don't see any elaborated documentation or tutorial for overwriting the form control styles defined in Material pre-built theme.

do i need to remove reference of indigo-pink pre-built theme in styles.css by taking a copy of pre-built theme styles into custom-theme.scss and override as per my need?? or Could you please advise any other alternative?

There's a bug with encapsulation, making you unable to override styles for dynamically generated elements, if your styles aren't global. 3 solutions are possible : 1) place your styles in your global styles.scss file. 2) disable view encapsulation setting : encapsulation: [ViewEncapsulation.None] in your component (but be careful because all styles in this component will become global to all your components) 3) define your own theme, which is decribed in many posts on this very websit.e — Maxime Flament
@Flament, the current Emulated encapsulation Mode is the one I wanted as per my current need. Could you please share the posts which explained about custom theme I detail? — BVS
Hello, yeah here it is : stackoverflow.com/questions/40915277/… This link explains how to override pre-built theme colors. Also see Kostas Siabanis link: stackoverflow.com/a/45478747/5710894 where you'll find works-around to override default theme styles — Maxime Flament

Kostas Siabanis Kostas Siabanis · Accepted Answer · 2017-08-03T08:25:30

Your problem is styles encapsulation and AFAIK is not a bug.

From Angular documentation:

Component CSS styles are encapsulated into the component's view and don't affect the rest of the application.

So basically, changes you include in custom-theme.scss never reach the view. You can set view encapsulation to NONE on the component:

import {Component, OnInit, ViewEncapsulation} from '@angular/core';

...

@Component({
    ...
    encapsulation: ViewEncapsulation.None
})

That should allow changes to reach the view. For more information you can read this thread.

Create a custom theme to override form controls built using Angular Material - Angular 4

2 Answers