How to apply style to angular mat-select selected value

Viewed 794

I am trying to make a custom mat-select style. So far I made everything except the span that shows the selected value. I am talking about mat-select-min-line and mat-select-value-text elements.

This is what I have done for now

enter image description here This is what I have done for now

enter image description here This is how elements should look

In mat-select, elements are nested like this:

<div class="mat-select-value">
    <span class="mat-select-value-text">
        <span class="mat-select-min-line">
            Store
        </span>
    </span>
</div>

A edited the parrent class and added border, but inner two element are by size equal to the text and i cant change anything about them and cant center that text.

Sizes of thoes two elements are auto x auto by default, and if I change that, add padding, margin, nothing happens. Below is what i have tryed so far.

            .mat-select-value {
                
                text-align: center;
                height: 30px;
                
                border-radius: 100px;
                border: 1px solid $mint-500;
                
                .mat-select-value-text {
                    margin: auto !important;
                    height: 30px !important;
                    padding: 10px !important;
                    
                    .mat-select-min-line {
                        margin: auto !important;
                        height: 30px !important;
                        padding: 10px !important;
                    }
                }
                
            }

Only paading works actualy, bit it does not affect it. I also tryed all this directly through site inspector an nothing is working.

NOTE: I am using SCSS

1 Answers

Try adding your style of mat-select in index.html of Angular app, and if you are adding in specific component then use ::ng-deep before CSS.

Example:

::ng-deep .xyz{
//all your css
}
Related