I'm using Angular Material for my project's tab navigation, and I'm trying to style my mat-tab component to achieve a specific design.
Current Design vs. Desired Design: enter image description here Current Design (Figure 1): The inactive tabs have no underline. Desired Design (Figure 2): I want the inactive tab underlines to appear in dark gray, while the active tab underline should remain bright green.
I've tried using ::ng-deep and inspected various classes, but I haven't been able to achieve the desired result. Here's what I've attempted so far:
`::ng-deep .mdc-tab-indicator__content--underline {
border-color: grey;
}`
What I Need Help With: How can I ensure that the underline for inactive tabs remains visible in dark gray? Am I targeting the right classes and elements for styling the mat-tab? Are there any best practices or alternative approaches in Angular Material to achieve this design? I've been using the Chrome DevTools inspector and ng-deep to apply styles, but I'm not getting the results as expected.
Any guidance or code snippets to help achieve this design would be greatly appreciated!
Additional Context:
I've tried using Angular Material's mat-tab-group to style my tab component. I want the inactive tab underline to be visible and have a dark gray color, while the active tab should remain bright green. This 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; // Tried to keep it visible
}
&.mdc-tab--active::after {
background-color: #00d36b; // Green color for active tab
opacity: 1;
}
}`
What I Expected: I expected that this SCSS would keep the inactive tab underline visible in a dark gray color, as shown in the second image of my example, where the inactive tab underlines have a consistent, visible line in dark gray.
What Actually Happened: However, the inactive tab underline remains invisible or does not display as expected. The active tab's underline changes to green correctly, but the inactive ones do not retain the styling I've attempted to apply. I've used ::ng-deep to ensure styles penetrate Angular's ViewEncapsulation but still haven't achieved the desired outcome.
I'm looking for guidance on whether I'm targeting the correct elements and if there are best practices in Angular Material to achieve this kind of design.
You can use the below CSS, prefer ::before since it allows the active color to display above the gray background.
If you use ::after it renders after the tabs, so the tabs get hidden by the gray section.
.mat-mdc-tab-label-container::before {
content: '';
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
height: 2px;
background: lightgray;
}