css - 如何在 Angular 中为 ng-select 自定义 css？

Question

我正在尝试使用默认 View 封装来自定义 ng-select 的 css。我为此使用::ng-deep。

这部分似乎有效:

 .ng-select.custom-ng-select ::ng-deep {
          //this section works//
                 &.ng-select-container {
                        border: 1px solid #1CBC88;
                        color: #1CBC88 !important;
                        box-shadow: none;
                        font-size: 13px !important;
                        font-weight: bold;   }

但是，以下部分不起作用:

                   &.ng-select-opened {
                    &.ng-select-bottom {
                        >.ng-select-container {
                            border-bottom: 1px solid red;
                        }
                    }
                   }

}

我想在 ng-select 上使用::ng-deep 选择器打开选择时更改底部边框颜色。谢谢。

Answer 1

兄弟，你可以把这个CSS添加到你的component.scss文件中

::ng-deep.ng-select-container {
        border-bottom: 1px solid red !important;
     }

你也可以在 styles.scss 中全局添加这样的内容

.ng-select-container {
        border-bottom: 1px solid red !important;
     }