我无法为此剑道下拉菜单添加填充

Question

我一直在尝试调整剑道下拉列表的填充。 我也采用了单独的 class 和 Id 来进行适当的填充，但没有结果。 在浏览器中，我也尝试检查并在编辑器中进行一些更改，我复制了代码并将其放入编辑器中，我在浏览器中进行了更改，但最终无法进行正确的填充。

我的 HTML 代码：

---

<div class="col-lg-4">
<kendo-dropdownlist [data]="UsersInfo" value="Count of Users by Month"
  class="usersdropdown" (selectionChange)="onSelectUsersInfo($event)">
</kendo-dropdownlist>
</div>

<div class="col-lg-3">
<kendo-dropdownlist [data]="Years" value={{selectedYear}} style="padding: 10px;"
  class="dropdown" (selectionChange)="onSelectYear($event)">
</kendo-dropdownlist>
</div>

<div class="col-lg-3">
<kendo-dropdownlist [data]="Months" value={{selectedMonth}}
  class="dropdown" (selectionChange)="onSelectMonth($event)" >
</kendo-dropdownlist>
</div>

<div class="col-lg-2">
<div class="btn btn-danger" style="margin-top: 5px; width: 150px;">Search</div>
</div>

---

我的 CSS 代码：

---

.usersdropdown {
    width: 350px;
    margin-left: 5px;
    border-color: white;
    border: none;
}

.k-dropdown .k-dropdown-wrap, .k-dropdowntree {
    border-color: white;
    color: #656565;
    background-color: white;
    padding: 5px;
}

.k-grid-header, .k-header, .k-grid-header-wrap, .k-grouping- 
 header, .k-grouping-header .k-group-indicator, .k-grid td,
.k-grid-footer, .k-grid-footer-wrap, .k-grid-content-locked,
.k-grid-footer-locked, .k-grid-header-locked, .k-filter-row>td,
.k-filter-row>th {
    border-color: white;
    padding: 10px;
}

.btn-btn-danger {
    padding: 20px;
    margin-top: 10px;
    width: 200px;
}

.k-dropdown .k-dropdown-wrap, .k-dropdowntree .k-dropdown-wrap {
    border-color: white;
    color: #656565;
    background-color: white;
    padding: 20px !important ;
}

---

Answer 1

您的 styles 不影响 Kendo 组件的内部样式的原因是视图封装。 你可以在这里阅读。

要穿透这种封装，您可以在访问要设置样式的组件内的元素的任何 CSS 选择器之前使用::ng-deep 。

在您的情况下，例如：

::ng-deep .k-dropdown .k-dropdown-wrap, .k-dropdowntree .k-dropdown-wrap {
    border-color: white;
    color: #656565;
    background-color: white;
    padding: 20px !important ;
}

Answer 2

如果您希望这是全局更改，请将您的 css 移动到全局样式表。

如果您想让它仅应用于您的组件，我会将所有内容包装在单独的 class 中，然后将其放入::ng-deep 中。 这样，一旦您加载了此组件，styles 就不会影响您网站上的所有其他内容。

::ng-deep {
     .my-custom-wrapper-class {
         // your custom styles here
     }
}