title: How to customize the css for Angular Material paginator?
body: <p>I want to modify the default look of Angular Material Paginator.
  For example, I want to change the justify-content property to flex-start.</p>
  
  <pre><code>.mat-paginator-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 56px;
  padding: 0 8px;
  flex-wrap: wrap-reverse;
  width: 100%;}
  </code></pre>
  
  <p>What I did was- I pasted the css below in styles.css file </p>
  
  <pre><code>.mat-paginator-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 56px;
  padding: 0 8px;
  flex-wrap: wrap-reverse;
  width: 100%;}
  </code></pre>
  
  <p>But that didn't work. I also tried the css in the component's css file. But that also didn't work.
  So how can I modify the css ?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Turns out that I had to use !important and it worked!. I was avoiding that that but had no other choice. Any better solutions, then please let me know.</p>