Question

我正在尝试将自定义样式应用于MatButton。我在.mat-button类上应用了一些border-radius。但是，当我单击按钮时，叠加（具有涟漪效果）保持不变（不继承border-radius）

我尝试将样式应用于.mat-button-focus-overlay，.mat-button-ripple，.mat-ripple（两个border-radius: inherit | 10px并且它没有任何效果（带{{1的事件）标志）。

由于这种涟漪是JS生成的：有没有人知道如何以正确的方式设计它？（例如：材料主题等）

谢谢。

Answer 1

使用Angular Material时我通常会做什么并想要更改默认样式：检查devtools中的button元素（它应该包含一些子元素），并尝试更改每个元素的样式（然后不要＆＃ 39;忘记删除你写的不必要的样式），从父母移到孩子。它对我来说总是很好。有时您还需要使用::ng-deep作为目标。

但是，当我点击按钮时，叠加层（带有涟漪效果）保持不变（不继承border-radius）

如果您使用最新的Material版本，您要查找的元素是：

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

我尝试在Angular Material网站（在devtools中）更改border-radius，并且在没有!important的情况下工作正常。

Answer 2

您不应该尝试更改图书馆以满足您的需求。

相反，您应该创建自己的按钮。您可以在互联网上找到 such as there 的示例。

然后，您可以设置新创建的组件的样式，以应对您的设计和主题。如果您不知道如何操作，可以找到 more information here

// Mandatory codepen code

Answer 3

我修复了z-index的相同问题。像这样：

.mat-button, .mat-flat-button {
    border-radius: 18px !important;

    .mat-button-ripple {
      border-radius: inherit;
      z-index: 1;
    }
}

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

3 个答案: