Блог

Главная - Вопросы по программированию - Угловой коврик-вкладка-навигационная панель как я могу изменить цвет текста?

Угловой коврик-вкладка-навигационная панель как я могу изменить цвет текста?

#angular #angular-material #navbar

#угловой #угловой материал #панель навигации

Вопрос:

Выполнив следующее, я могу изменить цвет текста вкладки :

 .mat-tab-link {
  color: black;
}

Но текст очень слегка прозрачен, что придает ему серый вид (на белом фоне), когда вкладка не выбрана. Как я могу установить прозрачность / CSS для невыбранных вкладок?

Ответ №1:

Вы можете найти конкретную комбинацию классов, посмотрев на DOM, а затем указать это, или просто сделать:

 .mat-tab-link {
  color: black;
  opacity: 1 !important;
}

Возможно, вам потребуется использовать ::ng-deep 

 ::ng-deep.mat-tab-link {
  color: black;
  opacity: 1 !important;
}

Комментарии:

1. Не используйте ng-deep, он устарел. Вместо этого используйте Scss.

Ответ №2:

Вы можете добавить стиль внутри styles.css .

 .mat-tab-link{
  color:#3182ce;
}
.mat-tab-link.mat-tab-label-active{
  color:#ccc;
}

Вот Stackblitz:https://stackblitz.com/edit/angular-mat-tab-nav-qka9gi?file=styles.css