My project utilizes Angular Material for tab navigation, and I am working on customizing the appearance of my mat-tab component to match a specific design.
Current Design vs. Desired Design: view image description here Current Design (Figure 1): Inactive tabs do not have an underline. Desired Design (Figure 2): I aim for inactive tab underlines to be in dark gray, while active tab underline remains bright green.
I have experimented with ::ng-deep and investigated different classes, but I am unable to achieve the desired outcome. Here's what I've tried so far:
`::ng-deep .mdc-tab-indicator__content--underline {
border-color: grey;
}`
What Assistance I Require: How can I make sure that the underline for inactive tabs is clearly visible in dark gray? Am I targeting the correct classes and elements to style the mat-tab? Are there any recommended practices or alternative methods within Angular Material to accomplish this design goal? Despite using Chrome DevTools inspector and ng-deep for styling application, the results are not as expected.
Any advice or snippets of code to help achieve this design will be greatly appreciated!
Additional Details:
- Angular Version: 17
- Angular Material Version: Latest Thank you for your assistance!
I have been utilizing Angular Material's mat-tab-group to customize my tab component. My objective is to ensure that inactive tab underlines are visible with a dark gray color, while active tab remains bright green. Below is my current SCSS attempt:
scss
`::ng-deep .mat-mdc-tab-group .mat-mdc-tab {
// Custom styles for inactive tab underline
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #555555; // Dark gray color for inactive tabs
opacity: 0.5; // Attempting to keep it visible
}
&.mdc-tab--active::after {
background-color: #00d36b; // Green color for active tab
opacity: 1;
}
}`
Expected Outcome: I anticipated that this SCSS would maintain the visibility of inactive tab underlines in dark gray color, similar to the second image in my example where inactive tab underlines are consistently displayed in dark gray.
Actual Outcome: Unfortunately, the inactive tab underline remains unseen or does not display as intended. The active tab's underline changes correctly to green, but the inactive ones do not retain the styling I attempted to apply. Despite using ::ng-deep to penetrate Angular's ViewEncapsulation, the desired result has not been achieved.
I am seeking guidance on whether I am targeting the appropriate elements and if there are best practices in Angular Material to reach this particular design requirement.