为什么我的 Angular 6 个按钮没有波动？

Question

最近我一直在编写应用程序的前端代码。我一直在使用 Angular 6 来构建它，但我注意到我的按钮有一个小偏差。当您将鼠标悬停在它们上方时，它们会变暗，但当您单击它们时，它们不会产生任何连锁反应。这是我的 app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import {RouterModule} from '@angular/router';
import {Routes} from '@angular/router';
import { AppComponent } from './app.component';
import {
  MatToolbarModule, MatButtonModule, MatInputModule, MatIconModule, MatSelectModule, MatTableModule, MatGridListModule,
  MatCardModule, MatMenuModule, MatFormFieldModule, MatOptionModule
} from '@angular/material';
import { PlaceholderComponent } from './placeholder/placeholder.component';
import { LoginComponent } from './login/login.component';
import { UserComponent } from './user/user.component';
import {HttpClientModule } from '@angular/common/http';
import { RegisterComponent } from './register/register.component';
import {FormsModule} from '@angular/forms';
import {ReactiveFormsModule} from '@angular/forms';
import { LayoutModule } from '@angular/cdk/layout';
import 'hammerjs';




const routes: Routes = [
  {path: 'placeholder', component: PlaceholderComponent},
  {path: 'register', component: RegisterComponent},
];

@NgModule({
  declarations: [
    AppComponent,
    PlaceholderComponent,
    RegisterComponent,
    LoginComponent,
    UserComponent,
    RegisterComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatToolbarModule,
    MatButtonModule,
    MatInputModule,
    MatSelectModule,
    MatTableModule,
    MatIconModule,
    MatFormFieldModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forRoot(routes ),
    MatGridListModule,
    MatCardModule,
    MatMenuModule,
    LayoutModule,
    MatOptionModule
  ],
  exports: [
    MatButtonModule,
    MatCardModule,
    MatMenuModule,
    MatIconModule,
    MatSelectModule,
    MatInputModule,
    MatToolbarModule,
    MatTableModule,
    MatSelectModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatOptionModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的app.component.css

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
.divider {
  width: 50px;
  height: auto;
  display: inline-block;
}
.mat-card {
  text-align: -webkit-center;
}

.demo-toolbar {
  display: flex;
  align-items: center;
  width: 100%;
}

.demo-form {
  min-width: 150px;
  max-width: 500px;
  width: 100%;
}

.demo-full-width {
  width: 100%;
}

body {
  margin: 0;
  font-family: Roboto, sans-serif;
}

mat-card {
  max-width: 80%;
  margin: 2em auto;
  text-align: center;
}

mat-toolbar-row {
  justify-content: space-between;
}

.done {
  position: fixed;
  bottom: 20px;
  right: 20px;
  color: white;
}

.content-center {
  text-align: -webkit-center;
}

这是我的 app.component.html。

<mat-toolbar color="primary">
    <span> A store</span>
  <span class="demo-toolbar"></span>
  <button mat-button color="accent">Register</button>
  <span class="divider"></span>
  <button mat-button >Login</button>
  <span class="divider"></span>
  <button mat-button>See your profile now!</button>
</mat-toolbar>
<mat-card>
  <span>
    This is a shop.
    Login or register above!
  </span>
</mat-card>
<div>
  <router-outlet></router-outlet>
</div>


<!doctype html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <meta charset="utf-8">
  <title>ClothAppFrontEnd</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body class="mat-app-background">
  <app-root></app-root>
</body>
</html>

My Angular site index.html 不幸的是，我看不出有什么问题。我已经导入了主题，并且在我的 index.html 中链接了来自 Google 的 Material 图标。感激地接受帮助。

你好。这是 StackBlitz 中的 MCV 示例。 https://stackblitz.com/edit/angular-xiapvj

Answer 1

那是 Angular Material 个按钮的 :hover 操作，mat-button。参见https://material.angular.io/components/button/overview上的官方mat-button示例，如果将光标悬停在按钮上，<span>标签下的<button>标签中会有一个<div class="mat-button-ripple mat-ripple" matripple=""></div>。 mat-button-ripple 造成了 :hover 效果。

了解了波纹的原因后，您可以尝试多种方法来覆盖样式。一种极端的方法是使用 ::ng-deep 组合器覆盖特定页面上的 mat-button-ripple。

7 月 31 日的编辑： 我犯了一个错误。这是造成这种效果的另一个因素 <div class="mat-button-focus-overlay"></div>。 .mat-button-focus-overlay的样式是background-color: rgba(255,215,64,.12);

要使用 ::ng-deep 组合器修复样式，请将此样式添加到组件样式文件 app.component.css。

::ng-deep .mat-button.mat-accent .mat-button-focus-overlay, 
.mat-icon-button.mat-accent .mat-button-focus-overlay, 
.mat-stroked-button.mat-accent .mat-button-focus-overlay {
    background-color: transparent;
}

Answer 2

对于所有疲倦的访客来说，这是我没有注意到的偷偷摸摸的疏忽。我只是错过了在我的 styles.css class 中导入我的主题，我今天将上传我的 MCV 示例。时刻警惕小疏忽！

styles.css（之前）（它是空的。）

styles.css（之后）

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

为什么我的 Angular 6 个按钮没有波动？

Why aren't my Angular 6 buttons rippling?

angular

angular-material-6