angular - 如何将样式应用于角度垫选择选定值

Question

我正在尝试制作自定义垫选择样式。到目前为止，除了显示所选值的跨度之外，我制作了所有内容。我说的是mat-select-min-line元素mat-select-value-text。

这就是我现在所做的

这就是我现在所做的

这就是元素的外观

在 mat-select 中，元素嵌套如下：

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

A 编辑了父类并添加了边框，但内部两个元素的大小等于文本，我无法更改它们的任何内容，也无法居中该文本。

默认情况下，这两个元素的大小是auto x auto默认的，如果我更改它，添加填充、边距，什么都不会发生。以下是我到目前为止所尝试的。

            .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;
                    }
                }
                
            }

实际上只有填充起作用，它不会影响它。我还通过现场检查员直接尝试了所有这些，但没有任何效果。

注意：我正在使用 SCSS

Answer 1

尝试在 Angular 应用程序的 index.html 中添加您的 mat-select 样式，如果您要添加特定组件，则::ng-deep在 CSS 之前使用。

例子：

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