CODEWITHSUNDEEP
angularangular-materialng-bootstrap
Sjaak
Sjaak

Reputation: 4160

Why does Angular (Material) insist in overiding my scss styles

I'm a newby to typescript / angular.

Porting an application from Angular13 to Angular16, including material and ngbootstrap. My old html and mat table for which the row color is determined in typescript. It looked like this:

<tr mat-row [ngClass]="determineRowClass(row)" *matRowDef="let row; columns: displayedColumns;"></tr>

The typescript would then return:

    public determineRowClass(row: RegistrationObject) {
        if (row.registrationHistory?.registered === 'nee') {
            // Red background when object has been deregistered.
            return 'alert-danger';

        }
        else if (row.registrationHistory?.underReview === 'ja') {
            // Blue background when object is under review.
            return 'alert-info';
        }
        return '';
    }

Looking in the debugger, I can see the following:

<tr _ngcontent-ng-c2810724556="" role="row" mat-row="" class="mat-mdc-row mdc-data-table__row cdk-row alert-danger ng-star-inserted" ng-reflect-ng-class="alert-danger">
...

So it is picked up.

Unfortunately, looking at the generated css I see this:

enter image description here

The only way I can overcome this is by adding my own style classes.. Which seems to beat the idea of using predefined styles from libraries.

.alert-danger {
 background-color: #F8D7DAFF !important;
}

This is not the only occurrence of this problem. I've got this all over my application where material components seem to have their own 'idea' on what style is better. It drives me a bit mad. Do I miss something?

Upvotes: 1

Views: 400

Answers (1)

Random
Random

Reputation: 3236

There are actual multiple issues here. Your issue is not with Angular MAterial, but with Bootstrap, which has been refactored. It doesn't work the same way.

  1. You see the same code duplicated in the generated CSS. It means you imported angular material twice. Please check your angular material imports. But this does not cause any issue, since it overrides itself. It just makes the code twice as big than it should.
  2. What you see in the generated CSS is the color definitions. So in your own CSS, you can use background-color: var(--bs-alert-bg) if you wish. That's what the code you see makes you able to do. It defines a color variable depending on your theme.
  3. If your row is not applying the "alert" theme, this is because the color is set, but not used. It means there is an other code in bootstrap using that --bs-alert-bg variable, but does not apply to your tr.
    reading the doc, you actually also need the class .alert, which applies the color : https://getbootstrap.com/docs/5.3/components/alerts/

Upvotes: 0

Related Questions