The style (css) of Angular Material is not the same of the one in the documentation
Question
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-appAdding 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
- Now I tried to add a simple form like the one here: https://material.angular.io/components/form-field/overview
So inside theapp.module.tsI'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
2 answers
solution1
2 ACCPTED 2020-04-20 15:58:08
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>
solution2
0 2020-04-19 09:39:34
Try add @import '@angular/material/prebuilt-themes/pink-bluegrey.css'; in your styles.css file.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.