Menu
This thing it's starting to annoying me, so I'm here to ask help!
I've started working on an Angular Application with the Material.
I want the exact same style that the material components have in the documentation.
Let me explain the steps that I've done:
Creating an Angular Application
ng new my-dream-app
Adding Material
ng add @angular/material
? Choose a prebuilt theme name, or "custom" for a custom theme: Pink/Blue Grey [ Preview: https://material.angular.io?theme=pink-bluegrey ]
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes
app.module.ts I've added the needed import:...
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent
],
imports: [
...
MatInputModule,
MatFormFieldModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
and inside the app.component.html I've put the component:
<form class="example-form">
<mat-form-field class="example-full-width">
<mat-label>Favorite food</mat-label>
<input matInput placeholder="Ex. Pizza" value="Sushi">
</mat-form-field>
<mat-form-field class="example-full-width">
<mat-label>Leave a comment</mat-label>
<textarea matInput placeholder="Ex. It makes me feel..."></textarea>
</mat-form-field>
</form>
Exactly as reported on the Documentation
Now if I try to run the application I have that:
instead then that:
I added a background color tho increase the legibility but still I notice that the color of the inserted text is different from the example. Mine is black and theirs is white.
Also, the color of the focused element is different ('Favorite food' for me is #c2185b and for them is #e91e63).
Why there are all these differences between the example and the real working code? (I have selected the same the theme 'Pink & Blue-grey')
Did I miss something?
Is possible to have the same style to the documentation page without override by hand the CSS?
The full code is available here: https://github.com/gixlg/AngularGCCU
567
launch npm install
and in your body add the class <body class="mat-app-background">, or if you want you can try to add import { MatSidenavModule } from "@angular/material/sidenav"; in your app.module.ts
and put your html code in <mat-sidenav-container>
177
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
