Где-то в вашем приложении вам нужно применить типографику к телу страницы приложения, чтобы все компоненты автоматически наследовали его, включая оверлейный компонент, содержащий диалог.В демонстрации stackblitz вы прокомментировали это, чтобы проверить типографику:
body {
/* font-family: Roboto, Arial, sans-serif; */
margin: 0;
}
Так что вам нужно либо заменить это в файле темы на что-то вроде:
body {
font-family: mat-font-family($custom-typography);
margin: 0;
}
Или (выне можете сделать это при использовании stackblitz) используйте класс типографики Angular Material на своей главной странице index.html:
<body class="mat-typography">
...
</body>
Кроме того, вашей конфигурации типографии необходимо определить размеры и вес для всех используемых уровней типографикиугловой материал.Простой способ просто изменить конфигурацию по умолчанию - использовать слияние SASS.Например:
$custom-typography: map-merge(
mat-typography-config(),
mat-typography-config(
$font-family: 'Roboto, sans-serif'
)
);
Это берет ваши определения и записывает их поверх конфигурации по умолчанию, оставляя все, что вы не изменили заново, без изменений.
И вам нужно только позвонить mat-core()один, как он будет называть angular-material-typography(), что в свою очередь вызывает mat-base-typography().