2

I'm trying to customize the MatButtonToggle but have difficulties centering the label :

enter image description here

The template :

<mat-button-toggle-group name="condition" aria-label="Condition">
  <mat-button-toggle value="and" checked>
    <div>ET</div>
  </mat-button-toggle>
  <mat-button-toggle value="or">OU</mat-button-toggle>
</mat-button-toggle-group>

The style :

.mat-button-toggle-checked {
  background-color: $secondary-color;
  color: white;
}

mat-button-toggle-group {
  height: 25px;
  border-radius: 4px;
  border: solid 1px $secondary-color;
}

mat-button-toggle {
  font-size: 15px;
  background-color: white;
  color: $secondary-color;
}

How can I do that ?

    
improve this question

2 Answers 正确答案

3

add this:

.mat-button-toggle-label-content{
  line-height: 0px !important;
  padding: 12px 10px 10px 10px !important
}

to your styles.css file of your src folder.

and in you html remove the <div> :

<mat-button-toggle-group name="condition" aria-label="Condition">
  <mat-button-toggle value="and" checked>ET</mat-button-toggle>
  <mat-button-toggle value="or">OU</mat-button-toggle>
</mat-button-toggle-group>

DEMO

improve this answer
  • Thank you, you saved me a headashe here – An-droid Oct 2 '18 at 15:59
  • @An-droid you'r welcome :-) – Fateme Fazli Oct 3 '18 at 10:20
  • @FatemeFazli This works perfectly. Can you tell me why the .mat-button-toggle-label-content style needs to be in the top-level styles.css? Why does it not work if that is in the .css file at the component level? – Jason PowellFeb 9 at 20:38
  • 1
    @JasonPowell you're welcome, By default, Angular component styles are scoped to affect the component's view. This means that the styles you write will affect all the elements in your component template. They will not affect elements that are children of other components within your template. – Fateme Fazli Feb 9 at 21:11
  • 1
    @JasonPowell Some Angular Material components, specifically overlay-based ones like MatDialog, MatSnackbar, etc., do not exist as children of your component. Often they are injected elsewhere in the DOM. This is important to keep in mind, since even using high specificity and shadow-piercing selectors will not target elements that are not direct children of your component. Global styles are recommended for targeting such components. – Fateme Fazli Feb 9 at 21:11
0

I think you should use ng-deep for this.

::ng-deep .mat-button-toggle-label-content{
  line-height: 0px;
  padding: 12px 10px 10px 10px;
}

The important flag is always a bad idea and is, in general, a "bad practice".

There is currently only a draft on how to replace ng-deep for more information about that here.

UPDATE

You could also try to create a global CSS file and be very specific to your use case and register it in your styles.css. With that, you can avoid the ng-deep and the !important flag. Just be mindful that this could overwrite different places.

More to that topic you can find here

improve this answer
  • ng-deep is marked as deprecated. – Tim Sep 9 at 2:33
  • Still better than important. Additionally, you should read further. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools. – Myracle Sep 9 at 3:10 

来自  https://stackoverflow.com/questions/52608705/center-text-in-angular-material-matbuttontoggle/52609003