I have a mat-select within an ngx-datatable.
Through css, I have been unable to change the text color of the selected option. I believe my selector is working, because I have been able to change font-weight and size. The options are colored appropriately in the drop-down list, but not when they are selected. Is there a unique property to change the selected option's color?
<ngx-datatable-column prop="UserAcceptanceStatus" name="Action">
<ng-template let-row="row" ngx-datatable-cell-template let-value="value">
<mat-select (selectionChange)="changeStatus(row.JobId, $event.value)" [value]="value">
<mat-option class="option" *ngFor="let any of status" [value]="any.value">{{any.action}}</mat-option>
</mat-select>
</ng-template>
</ngx-datatable-column>
.option {
color: $ebPurpleText;
text-align-last: center;
width: inherit;
font-family: Montserrat;
font-weight: bold;
font-size: 24px;
border: solid 1px #78206d;
width: 180px;
height: 68px;
}
UPDATE:
The issue ended up being an imported style sheet with !important on a property. Added a (:not) clause to the selector in the imported style sheet in order to exclude my item