覆盖角物质体排版
覆盖角物质体排版
提问于 2018-03-28 12:41:03
我在一个角(v5.2.0)应用程序中使用角材料(v5.2.4)创建了一个自定义主题。
我的主题。
@import '~@angular/material/theming';
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400,500');
@include mat-core();
$my-theme-primary: mat-palette($mat-deep-orange);
$my-theme-accent: mat-palette($mat-amber, A200, A100, A400);
$my-theme: mat-light-theme($my-theme-primary, $my-theme-accent);
$my-typography: mat-typography-config(
$font-family: '"IBM Plex Sans Condensed"'
);
.my-theme {
@include angular-material-theme($my-theme);
@include angular-material-typography($my-typography);
}我还将类名mat-app-background mat-typography添加到应用程序的body页面中的index.html页面中。
当我将my-theme类添加到我的应用程序的容器中(在body中)时，所有的材料组件do都会获得自定义字体(例如单选按钮标签等)，但是组件之外的任何内容都得不到它。
我也尝试过使用angular-material-typography()和mat-base-typography()混频器，但没有效果。
如何覆盖mat-typography类中的字体？
回答 5
Stack Overflow用户
回答已采纳
发布于 2018-03-29 09:45:06
这个被接受的问题为我指明了正确的方向，这就是我如何让它发挥作用的原因，以供将来参考：
@import '~@angular/material/theming';
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400,500');
@include mat-core();
$my-theme-primary: mat-palette($mat-deep-orange);
$my-theme-accent: mat-palette($mat-amber, A200, A100, A400);
$my-theme: mat-light-theme($my-theme-primary, $my-theme-accent);
$my-typography: mat-typography-config(
$font-family: '"IBM Plex Sans Condensed"'
);
.my-theme {
@include angular-material-theme($my-theme);
// this is what fixed it
.mat-typography & {
font-size: mat-font-size($my-typography, body-1);
font-family: mat-font-family($my-typography, body-1);
line-height: mat-line-height($my-typography, body-1);
h1, h2, h3 {
font-family: mat-font-family($my-typography, body-1);
}
}
}Stack Overflow用户
发布于 2018-03-28 18:20:47
@import '~@angular/material/theming';
@import './color_palette.scss'; // contains custom palette
@import './app_theme.scss'; // contains app mixin
$app-typography: mat-typography-config(
$font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif',
$display-4: mat-typography-level(112px, 112px, 300),
$display-3: mat-typography-level(56px, 56px, 400),
$display-2: mat-typography-level(45px, 48px, 400),
$display-1: mat-typography-level(34px, 40px, 400),
$headline: mat-typography-level(24px, 32px, 400),
$title: mat-typography-level(20px, 32px, 500),
$subheading-2: mat-typography-level(16px, 28px, 400),
$subheading-1: mat-typography-level(15px, 24px, 400),
$body-2: mat-typography-level(14px, 24px, 500),
$body-1: mat-typography-level(14px, 20px, 400),
$caption: mat-typography-level(12px, 20px, 400),
$button: mat-typography-level(14px, 14px, 500),
// Line-height must be unit-less fraction of the font-size.
$input: mat-typography-level(16px, 1.25, 400)
);
@include mat-core($app-typography);
$primary: mat-palette($deeppurple); // $deeppurple form color_palette
$accent: mat-palette($blue); // $blue form color_palette
$warn: mat-palette($red); // $red form color_palette
$theme: mat-light-theme($primary, $accent, $warn);
@include app-theme($theme); //app mixin from app_theme
body, html {
margin: 0;
height: 100%;
font-size: mat-font-size($app-typography, body-1);
font-family: mat-font-family($app-typography);
line-height: mat-line-height($app-typography, body-1);
}Stack Overflow用户
发布于 2018-11-22 16:32:55
仅这一点(摘自@Dharan G的答案)就可以将字体输入到所有组件中：
$config: mat-typography-config(
$font-family: 'IBM Plex Sans Condensed, sans-serif'
);
@include mat-core($config);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49534841
复制相关文章
相似问题
腾讯云开发者
