#angular #angular-material #material-design
#angular #angular-material #материал-дизайн
Вопрос:
Это нормально, что Angular Material не применяет стиль к обычным текстовым элементам html, таким как h1 и p ?
<h1>Hallo</h1>
<p>Test paragaph</p>
<button mat-raised-button>Click me!</button>
Для меня это выглядит так:
:
Несмотря на то, что я использую тему a, мой styles.scss выглядит следующим образом:
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
Как сделать так, чтобы текстовые элементы выглядели как материальные элементы?
Ответ №1:
Под «выглядеть как материальные элементы» я полагаю, вам нужен шрифт roboto.
Вы в своем style.css :
body {
font-family: Roboto, Arial, sans-serif;
}
Комментарии:
1. Спасибо, это сработало. Как всегда, мне было интересно, почему angular material автоматически не оформляет текстовые элементы? Я ожидал, что он применит общий способ оформления
2. Потому что многие люди хотят другой шрифт. Шрифт roboto не является частью material design. Но с этим все в порядке.
Ответ №2:
Возможно, вам потребуется импортировать шрифт по ссылке или импортировав его в свой файл .css или .scss. Это не всегда выполняется автоматически, если вы не добавили Angular material с помощью метода ‘ng add’.
Ответ №3:
если вы не можете импортировать файл .css или .scss, вы можете добавить ссылку css в index.html и использовать по всему проекту.
<head>
<link href="material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
</head>
текст вы можете применить свой css к приведенным ниже текстовым элементам.
<input id="name" name="name" placeholder="Enter to text" type="text">