Как переписать стили angular-material2?

Question

Я использую Angular2 с компонентами дизайна материалов. И хотел бы перезаписать некоторые стили, но похоже, что это невозможно из-за ViewEncapsulation.

Можно ли отключить ViewEncapsulation(ViewEncapsulation.None) для сторонних компонентов?

Answer 1

Лично я не стал бы касаться фактического стороннего источника (например, изменения инкапсуляции), и причина в том, что их стиль может испортиться.

Но чтобы справиться с этим, я дам вам несколько решений:

1-- Гадкий:

Вы можете переопределить все, что захотите, от компонента (возможно, от вашего компонента верхнего уровня), если его viewEncapsulation - none .

Так что зайдите в ваш app.ts и измените инкапсуляцию на none и делайте что хотите внутри этого:

  inside your app.scss or css

    md-input {

       input { color:red} 

     // or whatever style you want to override , sometimes you'll need !important .
    }

2-- Лучше:

В материале есть несколько файлов variables.scss, которые вы можете уточнить в их источнике, и вы можете легко переопределить их переменные, такие как цвета и прочее.

В общем, вы можете переопределить глобальный CSS только в том случае, если компонент, из которого вы переопределяете, его инкапсуляция не равна нулю, иначе ваши стили не будут выходить за пределы этого компонента.