How can I change the style to a component, using angular material, I am making the change to the directive directly, but do not take it ...?
home.component.html
<md-card>
<app-home></app-home>
</md-card>
home.component.css
md-card {
max-width: 60px;
margin: 0 auto;
}
When Angular 2 compiles the styles within the component to which the view is also linked, to all styles, a suffix related to the component is added, and as within your view you are using an external component (of the material package) the compiler takes it as if it had no relation and does not put the same prefixes.
If you are using Angular CLI the best you can do is put the style you want to change from md-card into the styles.css file that is in the same folder that main.ts , and if you want to change only that, you can put a class in your view.
home.component.html
<md-card class="custom-md-card">
<app-home></app-home>
</md-card>
styles.css
md-card.custom-md-card {
max-width: 60px;
margin: 0 auto;
}
If you want the style to be reflected throughout the application use the file style.css, if you want it to only apply to the component where you can associate a .css file with it within the decorator (if you use angular-cli already it creates you one empty)
@Component({
selector: 'mi-selector',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})