angular - MatButton - 单击时如何修改叠加样式

标签 angular angular-material2

我正在尝试将自定义样式应用于 MatButton。我在 .mat-button 类上应用了一些边框半径。但是,当我单击按钮时,覆盖层(具有波纹效果)保持不变(不继承边框半径)

我尝试将样式应用于 .mat-button-focus-overlay、.mat-button-ripple、.mat-ripple(两者 border-radius:继承 | 10px 但它没有有任何影响(带有 !important 标志的事件)。

由于这个波纹是 JS 生成的:有人知道如何以正确的方式设计它吗? (例如: Material 主题等)

谢谢。

最佳答案

在使用 Angular Material 并想要更改默认样式时,我通常会做什么:检查 devtools 中的 button 元素(它应该包含一些子元素),并尝试更改每个元素的样式(然后不要忘记删除您编写的不必要的样式),从父级移动到子级。它总是对我有用。有时您还需要使用 ::ng-deep 来实现您的目标。

但是,当我单击按钮时,覆盖层(具有波纹效果)保持不变(不继承边框半径)

如果您使用最新的 Material 版本,您正在寻找的元素是:

<div class="mat-button-ripple mat-ripple" matripple=""></div>

我尝试在 Angular Material 网站(在 devtools 中)上更改它的 border-radius,并且无需 !important 即可正常工作。

关于angular - MatButton - 单击时如何修改叠加样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48184289/

相关文章:

angular - 在 dart angular2 的组件中使用 paper-tabs

http - Angular2在HTTP 401错误时导航到路径

Angular找不到变量缓存

css - Angular 4 Material 选项卡 - css 不适用于标题模板

javascript - 使用 javascript Angular 更新表单控件

angular - 类型错误 : Cannot read property 'subscribe' of undefined in unit test

Angular 5 Material Table 用具有不同参数类型的函数替换 filterPredicate

javascript - 如何更改 Angular 库组件中使用的垫卡的样式

Angular Material 选择不会检测嵌套组件生成的选项的更改

angular - 是否可以使用 angular 指令作为 html 标签?