Bootstrap и Angular Материальный конфликт

Question

Я почти закончил создание проекта Angular, и мне нужен диалог подтверждения, поэтому я использовал для этого материал Angular. Теперь проблема в том, что он испортил мой стиль bootstrap во всем проекте, мне нужен только диалог подтверждения из Angular Материал, и это не так практично, чтобы я реструктурировал весь свой стиль проекта без bootstrap. что мне делать с этой ситуацией?

Answer 1

@Component({
  selector: 'your-component',
  encapsulation: ViewEncapsulation.Emulated
  styleUrls: ['./your.component.scss']
})

Внутри your.component.scss, в первой строке:

@import '~path/to/angular-material.css';

Теперь angular-material.css будет ограничено вашим компонентом и не будет применяться ни к какому другому компоненту в вашем проекте, даже к дочерние элементы текущего компонента.

Примечание : encapsulation: ViewEncapsulation.Emulated - это значение по умолчанию, поэтому оно вам на самом деле не нужно, но установка любого другого значения предотвратит работу области видимости.

Подробнее об инкапсуляции здесь .