Измените цвет переключателя в Material 2 с помощью простого CSS

У меня проблемы с изменением цвета переключателя компонента Angular Material 2. Я искал другие ответы и не мог заставить его работать.

Вот plunkr из примера переключателя Material 2:

https://plnkr.co/edit/JNDRKkF2oAxU5gPsR4lO?p=preview

Я знаю, что это сработает с этой строкой

<md-radio-button color="primary" class="example-radio-button"
   *ngFor="let season of seasons" [value]="season">
    {{season}}
</md-radio-button>

Но я не могу использовать свойство «цвет», потому что мы используем более старую версию Material 2 и не можем обновить ее в настоящее время.

Так что кто-нибудь знает, как сделать это с помощью простого CSS в приведенном выше примере, я был бы очень благодарен. Пробовал больше часа..


angular angular-material angular-material2
person sanyooh    schedule 18.08.2017    source источник
comment
Что вы имеете в виду, что нельзя использовать «цвет» в CSS?   -  person Vega    schedule 18.08.2017
comment
атрибут color=primary на md-radio-button   -  person sanyooh    schedule 18.08.2017
comment
Посмотрите мой ответ из этот пост   -  person Andrei Matracaru    schedule 18.08.2017

Ответы (2)


arrow_upward
2
arrow_downward

Поскольку ваша угловая версия 2.4.3, я предполагаю, что вы используете бета-версию 2 или более старую версию материала (для бета-версии 3 и более поздних версий требуется angular 4.x). Классы в более старых версиях имеют другие имена классов, чем текущие. Итак, вы можете попробовать следующий css:

Материал бета.1:

/deep/ .md-radio-inner-circle {
    background-color: skyblue;  /* Pick your color */
}

/deep/ .md-radio-checked .md-radio-outer-circle {
    border-color: skyblue;     /* Pick your color */
}

демонстрация Plunker с использованием Angular 2.4.1 и Material beta.1

Материал бета.2:

/deep/ .mat-radio-inner-circle {
    background-color: yellow;
}

/deep/ .mat-radio-checked .mat-radio-outer-circle {
    border-color: lime;
}

демонстрация Plunker с использованием Angular 2.4.1 и Material beta.2

person Nehal    schedule 18.08.2017

arrow_upward
2
arrow_downward

Вы можете сделать это с помощью ::ng-deep. Добавьте следующие классы в свой стиль компонента:

/deep/  .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{
    border-color: green;
}

/deep/  .mat-radio-button.mat-accent .mat-radio-inner-circle{
    background-color: green;
}

См. этот ДЕМО-ПРОГРАММА PLUNKER

person Faisal    schedule 18.08.2017
comment
наше приложение все еще работает с angular 2.4.3, поэтому я не могу использовать эту функцию - person sanyooh; 18.08.2017
comment
/deep/ похож на ::ng-deep? - person Pankaj Parkar; 18.08.2017
comment
с 2.4.3 используйте /deep/ ... см. обновленный ответ, plunker также обновлен. - person Faisal; 18.08.2017
comment
к сожалению, это решение не работает в нашем приложении. но спасибо за ваши усилия. мы пока оставим его в акцентном цвете и исправим его, когда обновим наши версии Angular и Material 2. - person sanyooh; 18.08.2017
comment
можно ли создать плунжер? - person Faisal; 18.08.2017
comment
Нет, извините, это займет у меня слишком много времени, и это всего лишь небольшая часть нашего приложения. мне просто интересно, почему я не могу переопределить классы css md-компонента именно в этом случае. - person sanyooh; 18.08.2017