Это начинает меня раздражать, поэтому я здесь, чтобы попросить помощи!
Я начал работать над приложением Angular с Материалом.
Я хочу точно такой же стиль, как материал Компоненты есть в документации.
Позвольте мне объяснить, что я сделал:
Создание Angular Приложения
ng new my-dream-app
Добавление материала
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
Теперь я попытался добавить простую форму, подобную приведенной здесь:
https://material.angular.io/components/form-field/overview Итак, внутри
app.module.ts я добавил необходимый импорт:
...
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent
],
imports: [
...
MatInputModule,
MatFormFieldModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
и внутри app.component.html я поместил компонент:
<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>
Точно так, как указано в документации
Теперь, если я попытаюсь запустить у меня есть приложение, которое:
, а затем:
Я добавил цвет фона, чтобы увеличить удобочитаемость, но все же замечаю, что цвет вставленного текста отличается от примера . У меня черный, а у них белый.
Кроме того, цвет сфокусированного элемента другой («Любимая еда» для меня - #c2185b, а для них - #e91e63).
Почему есть все эти различия между примером и реальным рабочим кодом? (Я выбрал ту же тему 'Pink & Blue-grey')
Я что-то пропустил?
Можно ли иметь такой же стиль на странице документации без переопределения вручную CSS?
Полный код доступен здесь: https://github.com/gixlg/AngularGCCU