问题描述
限时送ChatGPT账号..这个问题来自 Material2 Github repo.
This question comes from the Material2 Github repo.
我仍然无法为包含在自定义组件中的 Material 组件设置样式.
I still have problems to style a Material component that is wrapped in a custom component.
我有一个
组件,其中包含
I have a <logo>
component that contains <md-icon svgIcon="logo"></md-icon>
添加:
:host {
.mat-icon {
width: 100px;
height: 100px;
font-size: 56px;
}
}
不适用于我的自定义组件中的 Material 组件.
Will not apply to the Material component inside my custom component.
推荐答案
UPDATE: 2019-05-22
较新版本的 Material Design 可以选择将 [inline]="true"
设置为 HTML 元素的属性.
Newer versions of Material Design has the option to set [inline]="true"
as a property on the HTML element.
我建议改用这种方法.
<mat-icon svgIcon="thumbs-up" inline="true"></mat-icon>
使用时,图标将从父容器继承!
When using this, the icon will inherit from the parent container!
GLHF!:)
我收到了一些关于这个的问题,所以我只是想举一个更清晰的例子来说明如何使用它...
I have been getting some questions about this so I just wanted to make a clearer example of how to use it...
/* 1. Add this mixin to a "global" scss */
@mixin md-icon-size($size: 24px) {
font-size: $size;
height: $size;
width: $size;
line-height: $size;
}
/* 2. Then use it like this in you component scss */
mat-icon {
@include md-icon-size(32px);
}
示例用法
<mat-icon class="myIcon" svgIcon="search"></mat-icon>
:host {
.myIcon {
&mat-icon {
@include md-icon-size(32px);
}
}
}
这篇关于如何在 Material 中更改 mat-icon 大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论