0

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?

Nehal
  • 13,130
  • 4
  • 43
  • 59
BVS
  • 421
  • 1
  • 9
  • 17
  • 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 Aug 03 '17 at 08:31
  • @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 Aug 07 '17 at 10:40
  • Hello, yeah here it is : https://stackoverflow.com/questions/40915277/change-build-in-colors-angular-2-material This link explains how to override pre-built theme colors. Also see Kostas Siabanis link: https://stackoverflow.com/a/45478747/5710894 where you'll find works-around to override default theme styles – Maxime Flament Aug 07 '17 at 10:51

2 Answers2

0

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.

Kostas Siabanis
  • 2,989
  • 2
  • 20
  • 22
  • the current Emulated encapsulation Mode is the one I wanted as per my current need. I'll spend some more time to figure out the issue, If you have a code pen please share.. – BVS Aug 07 '17 at 10:43
  • Problem with ViewEncapsulation.None is that the styles for this component will propagate to every other components. What if he wants to override pre-built theme for this very component only? – Maxime Flament Aug 07 '17 at 10:55
  • He should use custom classes for that anyway. I will try to provide some code soon. – Kostas Siabanis Aug 07 '17 at 15:51
0

I would say that this is less of an issue with encapsulation and more with angular material theming configuration.

In order to change the theme for specific angular components, you would need to use Angular Material Mixin configuration options, and declare what you would like them to be for a custom theme.

Here's a good list of documentation for Angular Material, that I've been finding relevant as of Angular 5.1.(Along with the first stable release of Angular Material, v5.0)

https://blog.thoughtram.io/angular/2017/05/23/custom-themes-with-angular-material.html

https://medium.com/@tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1

And then here's a post to get dynamic themes into your app using Angular Material(>5.0).

Angular 2 Material Dynamic Themes

K. Waite
  • 1,574
  • 13
  • 12