我正在尝试将自定义样式应用于 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/