Styling a mat-tab element is not possible without utilizing the combination of ::ng-deep and

I'm facing a challenge with styling components that use mat-tab elements in my HTML. Currently, I can only style them using ::ng-deep .mat-tab-label {} and adding !important to at least one of the styles. However, I don't want to rely on this solution long-term, especially after reading this article.

Upon inspecting the elements in the developer tools, here's how they are structured:

<mat-card class="mat-card">
  <mat-tab-group class="mat-tab-group mat-primary">
    <mat-tab-header class="mat-tab-header">
      <div class="mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4 mat-ripple mat-tab-header-pagination-disabled>
      <div class="mat-tab-label-container">
        <div class="mat-tab-list">
          <div class="mat-tab-labels">
            <div class="mat-tab-label mat-ripple mat-tab-label-active ng-star-inserted">
            <mat-ink-bar class="mat-ink-bar">

Is there an alternative method I can use to style these elements in CSS without resorting to ::ng-deep and !important?

htmlcssangularelement

Answer №1

How can I customize these elements without resorting to ::ng-deep and !important in the CSS?

The solution in this scenario is to utilize Selector specificity and place your styles in the root style /src/styles.css (NOTE: avoid putting them in the components styleUrls as they won't take effect)

/* label style */
.mat-tab-label{
  background: green;
  color:white;
}
/* focus style */
.mat-tab-group.mat-primary .mat-tab-label:not(.mat-tab-disabled):focus, .mat-tab-group.mat-primary .mat-tab-link:not(.mat-tab-disabled):focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:not(.mat-tab-disabled):focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:not(.mat-tab-disabled):focus{
  background: red;
}
/* ink bar style */
.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
  background: yellow;
  height: 10px;
}

For a live demonstration of the code sample, please visit - https://stackblitz.com/edit/dmgrave-ng-so-anser-tabs-style?file=styles.css

I hope this information proves helpful.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are some alternative ways to facilitate communication between a parent and child component in Angular without resorting to property

Is there a method for obtaining real-time data exchange between components without resorting to property binding? I am unable to use property binding because my child component is in the form of a dialog and I am utilizing router-outlet in the app.compone ...

angular

What's the best way to display a component once a function has been executed?

My service controls the visibility of components using *ngIf! Currently, when I click a button, the service sets to true and the components appear instantly! I want the components to only show after a specific function has finished executing. This means I ...

javascriptjqueryhtmlangularangular-ng-if

Introducing an extra 'pipe' in rxjs angular may result in generating errors

Encountering an unusual issue with Angular. The following code functions correctly: this.form.valueChanges .pipe( startWith(this.form.value), pairwise(), tap(() => console.log('aa')) ...

angulartypescriptrxjs

Issues with integrating Jquery into Angular2

I am currently new to Angular2 and facing an issue. Despite successfully setting up the environment once, I am struggling to replicate the same on my home PC. Inside my add-page.component.ts, I have declared $ and jquery as follows:- declare var $ : any; ...

jqueryangular

Incorporate a dynamic HTML attribute into the ChildComponent

I am looking to include a dynamic HTML property called 'hits' in my ChildComponent within the HTML code: <child-component test={{ variable }}></child.component> I do not intend to use it as an input, but rather just for testing p ...

htmlangulartagshtml-tag-details

Learn the process of adding a tag to specific text with the help of JavaScript

I am attempting to implement a feature where the selected text will have a tag added to it. Within a textarea, I have some text entered. The goal is that when I select specific text from the textarea and click a code button, it should insert the tags aro ...

javascripthtml

Updating the Angular-phonecat application from version 1.x has encountered an issue: Unknown provider error with phoneProvider and phone

Currently, I am following this guide to learn how to transition from Angular1 to Angular2. After completing the steps in section 4, Upgrading the Phone Service, I fixed a typo error, However, when attempting to run the application using "npm start," I e ...

angularjsangularng-upgrade

What is the best way to customize the Bootstrap CSS for an <a> element?

I recently started a blog and wanted to streamline my design process by using Bootstrap to avoid having to deal with media queries. However, I encountered an issue where the <a> element was displaying as blue. I have another CSS file that is loaded a ...

htmlcssbootstrap-4

"Troubleshooting: Difficulty with hover function in jqgrid not functioning on colored rows

My JQGrid setup includes the following: <table id="grid"></table> var data = [[48803, "DSK1", "", "02200220", "OPEN"], [48769, "APPR", "", "77733337", "ENTERED"]]; $("#grid").jqGrid({ datatype: "local", height: 250, colNa ...

javascriptjqueryhtmlcssjqgrid

Transforming beautifulsoup content back into HTML format

Currently, I'm utilizing beautifulsoup to extract, parse, and modify an HTML document. The process seems to be functioning flawlessly; however, upon converting the soup object back into HTML using prettify(formatter="html"), I've notice ...

pythonhtmlbeautifulsoup

Error encountered when clicking on a checkbox in Bootstrap: Uncaught TypeError - Unable to access property 'click' of undefined

I'm facing an issue with a simple mvc table in my cshtml page. I am attempting to add a checkbox in one of the columns, but when I click on the checkbox, I receive the following error: Uncaught TypeError: Cannot read property 'click' of un ...

css.netasp.net-mvcrazorbootstrap-4

Combining multiple rows into a single row and inserting a new column

Hi there, I'm currently diving into the world of programming and tackling a project involving PHP and MySQL. However, I've encountered a bit of a roadblock. My current setup involves a table named marks, where each time a mark is added to a stud ...

phphtmlmysqlhtml-table

methods for concealing parse config credentials during client-side rendering

I have included Parse.initialize in my parse app's client-side code for login and signup. Is there a way to conceal this from being visible when the app is displayed so that it can't be easily inspected by unauthorized individuals? ...

javascripthtmlnode.jsexpressparse-platform

Apollo Angular encountering issues retrieving data from GraphQL/MongoDB

Exploring GraphQL and Angular for the first time, I am attempting to create a straightforward Angular component that utilizes GraphQL to retrieve data from a mongoose database. The GraphQL Express server is properly configured and functions well in graphiq ...

angularmongodbexpressgraphqlapollo-angular

Is there a way to accomplish this task with the HighCharts library?

Being new to Highcharts, I am currently working on a dashboard where I aim to showcase the percentage usage of equipment at a specific Plant. Despite reviewing various demos provided by Highcharts, I have not come across a similar example. This is the spe ...

javascripthtmlcsshighcharts

"Implementing a feature in Angular to display only a single ul element at a time while iterating through a

In the image above, there is an Add Person button. When this button is clicked, a new row labeled Person 1 is created, and this process continues for each subsequent click. At the right end of every row, there is a share icon that, when clicked, should ope ...

javascriptangular

Using MVC4 to send checkbox values as HtmlAttributes when a button is clicked

I have a series of checkboxes on my MVC4 webpage that are being dynamically generated in the following manner: <div style="float: left; padding-left: 5px; padding-right: 5px"> <br /> <h3>@Html.Label("Service Type")</h3> ...

javascriptjqueryhtmlasp.net-mvc-4

Adjusting the margin at the beginning of each CSS page break

Excuse the title, I struggled to find a more fitting description for it. I'm trying to break up long rows in a table across multiple pages. Everything works fine with the page-break-after for the <tr> tags. However, my main issue is that the br ...

htmlcss

Utilize ngFor to showcase additional items preceding the initial element

Is there a way to display an array using ngFor, but have a card displayed before the first element that opens a modal when clicked? https://i.sstatic.net/6QG0D.png Here is the code snippet for reference: <div fxFlex="25" *ngFor="let product of produc ...

cssangularangular-material2ngforangular-flex-layout

Having trouble setting up tailwind css for my Angular project, need some help

Initially, I was referencing this article (along with others): https://medium.com/@jacobneterer/angular-and-tailwindcss-2388fb6e0bab I've been attempting to integrate Tailwind into my Angular project without success. Additionally, I even started an A ...

angularwebpacktailwind-css