.mat-paginator-range-label styles is not customizable

Bug, feature request, or proposal:

Bug (or proposal, I’m not sure).

What is the expected behavior?

MatPaginator range cannot be fully customize with CSS.

What is the current behavior?

MatPaginator range is fully customizable with CSS.

What are the steps to reproduce?

As I see, Angular Material engine isn’t adding tag attribute _ng... to div with class mat-paginator-range-label. So if there is any style in module style.css file it has no effect because of that tag attribute (_ng...) is added to style. Example, user module style.css:

.mat-paginator-range-label {
  margin: 0 !important;
}

The same style.css but after Angular processing, in browser:

  .mat-paginator-range-label[_ngcontent-c17] {
    margin: 0 !important;
  }

But div that I’ve talking about looks like:

So the style.css gives no effect.

What is the use-case or motivation for changing an existing behavior?

It’s more flexible (I guess).

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/core": "^4.4.6",
"@angular/material": "^2.0.0-beta.12",
"@angular/platform-browser": "^4.4.6",
"@angular/platform-browser-dynamic": "^4.4.6",
...

"typescript": "~2.5.3"

macOS High Sierra, Safari, Google Chrome

Is there anything else we should know?

I don’t think so.

[shrralis]

@andrewseguin @willshowell you’re cool! Much thanks!

[willshowell]

@Shrralis as you mentioned, setting ViewEncapsulation.None will make all of your component’s styles globally effective. You have two options,

1. Scope all of your un-encapsulated component’s styles with a scoped parent selector

   .only-affect-these-components {
   
     .mat-paginator-range-label {
       margin: 0;
     }
   }
   

   <div class="only-affect-these-components">
     <mat-table> ... </mat-table>
     <mat-paginator>...</mat-paginator>
   </div>
   

   And as the comment above mentions, you can add only-affect-these-components (or similar) to your host directly.

2. Create a global style like this and add it to your global stylesheet

   // global styles
   .mat-paginator.marginless-paginator-range-label {
   
     .mat-paginator-range-label {
       margin: 0;
     }
   }
   

   <mat-paginator class="marginless-paginator-range-label">...</mat-paginator>
   

There is more information in this guide!