Почему я не могу изменить AngularMaterial Design на тот, который мне нужен?

Question

Достаточно ли гибок Angular Material, чтобы я мог легко изменить его дизайн на тот, который мне нужен с CSS, потому что сейчас все, что я пытаюсь изменить, не работает для меня?

Answer 1

Что вам нужно, так это проникнуть в стили угловых материалов.Для этого:

1) проверьте стили, которые вы хотите переопределить.

2) создайте селектор с более высокой специфичностью

3.1) проникните в Angular Material, используя либо ::ng-deep(устарело)

::ng-deep .my-specific-selector.mat-button.mat-flat-button.accent {...}

3.2) или проникните в Angular Material с помощью инкапсуляции (добавьте ViewEncapsulation.None к компоненту, который будет содержать стили. Однако будьте осторожны, это сделает стили этого компонента пронизывающими все приложение)

@Component({
  selector: 'app-whatever',
  templateUrl: './whatever.component.html',
  styleUrls: ['./whatever.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class myCustomClass {}

Answer 2

Отметьте Настройка стилей компонентов углового материала в официальной документации, где объясняется, как изменить стиль.Чтобы найти стили для переопределения, вы можете посмотреть в отладочном окне браузера или проверить источник GitHub для стилей.

Вот еще одна запись , в которой говорится оэто, который имеет несколько образцов.