markdown 角度 - 材质 - 如何覆盖材质按钮样式

Posted 2021-05-06

# Angular - Material - How to Override Material Button Style

[SOURCE](https://stackoverflow.com/a/48184505/1602807)

For Angular Material 6.2.1:

Add a Material button:

```
<button mat-raised-button>Test</button>
```

Inspect the `button` element in devtools and change the style to your liking. 

In your `/sass/_extend.scss` (could be any other name):

```css
.mat-raised-button {
  border-radius: 10px;
  background-image: linear-gradient(101deg, #7b9bed, #567fea);
  width: 100%;
  @extend %font-bold; // your font
  text-align: center;
  color: #ffffff;
  font-size: 14px;
  height: 48px;
  cursor: pointer;
  border: none;
}
```

Then in your component `scss` file import the `_extend.scss`:

```scss
@import "../../../sass/extend";
```

and use the `mat-raised-button` in your button like this:

```html
<button mat-raised-button
            (click)="goToNextScreen()"
            [title]="'DoctorProfile.book_this_doctor' | translate">
        {{ 'DoctorProfile.book_this_doctor' | translate }}
</button>
```

The button should now have ripple and raised effect.