I want to modify the default look of Angular Material Paginator.
For example, I want to change the justify-content property to flex-start.

```
.mat-paginator-container {
display: flex;
align-items: center;
justify-content: flex-end;
min-height: 56px;
padding: 0 8px;
flex-wrap: wrap-reverse;
width: 100%;}

```

What I did was- I pasted the css below in styles.css file 

```
.mat-paginator-container {
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 56px;
padding: 0 8px;
flex-wrap: wrap-reverse;
width: 100%;}

```

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 ?

**UPDATE**

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.