0

In my angular application, I have few toolbars in different components and few buttons on this toolbars. To style these buttons, I have written the CSS rules inside style.css to avoid repetition.

Now, in one of the component I added a mat-button-toggle-group too in the toolbar. As mat-button-toggle element generates a button element, the style from style.css is also applied on it. So to override this for the toggle group button, I wrote the CSS in the components style sheet. But unfortunately, this style is not getting applied.

A reduced HTML version can be:

<mat-toolbar>
  <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
    <mat-button-toggle buttonId="b1" value="1">1</mat-button-toggle>
    <mat-button-toggle value="2">2</mat-button-toggle>
    <mat-button-toggle value="3">3</mat-button-toggle>
  </mat-button-toggle-group>

  <button mat-raised-button color="primary">Primary</button>
</mat-toolbar>

In style.css I have:

.mat-toolbar button {
  margin-left: 10px;
}

And in my component's CSS I have tried:

.mat-button-toggle-button, 
#b1,
mat-button-toggle button,
.mat-button-toggle button {
  margin-left: 0;
}

I tried various selectors to select the underlying button but unsuccessful so far. The reproduced issue can be found here: https://stackblitz.com/edit/angular-1oe6ki

Any ideas, how can I do it? One way is to write the CSS rules of style.css into every component's CSS (and it works that way) but I would like to avoid repetition if possible.

Prerak Sola
  • 9,517
  • 7
  • 36
  • 67
  • 1
    You can use the techniques suggested in [this answer](https://stackoverflow.com/a/36528769/1009922). See [this stackblitz](https://stackblitz.com/edit/angular-1oe6ki-akerpf?file=app%2Fbutton-toggle-overview-example.css) and [this stackblitz](https://stackblitz.com/edit/angular-1oe6ki-u94oyw?file=app%2Fbutton-toggle-overview-example.ts). – ConnorsFan Jun 13 '19 at 22:19
  • I'll give it a shot! – Prerak Sola Jun 13 '19 at 22:21

0 Answers0