Menu
Is there any elegant way to use lighter/darker variants of either primary or accent colors with buttons in angular 2 material without recreating whole styling by hand?
409
Angular material color | Learn How Color work in Angular material? By using Angular material we can modify the color of component and choose the color we want, for this material provide us themes by which we can style our components this make use of google material design.
Angular Material uses native <button> and <a> elements to ensure an accessible experience by default. The <button> element should be used for any interaction that performs an action on the current page. The <a> element should be used for any interaction that navigates to another view.
To start, we can override the color of a mat-button. For the most part, the default styling of a Material button can be changed quite easily without much force or complex class names. New colors for buttons can be submitted simply by using the .mat- prefix on our custom color class.
It’s challenging to find resources that extend or modify the component styles and colors of the Angular Material Design framework. Most of the time, the overrides come from hacky solutions that provide a band-aid approach to solving a problem.
If you use sass you can import material theming into your scss file and target material colors like so:
app.component.scss
@import '~@angular/material/theming';
.buttonPrimary {
background-color: mat-color($mat-purple, 200);
}
.buttonAccent {
background-color: mat-color($mat-amber, A200);
}
app.component.html
<button md-raised-button class="buttonPrimary">primary</button>
<button md-raised-button class="buttonAccent">accent</button>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
