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

【问题标题】：I'm unable add the padding for this kendo dropdown我无法为此剑道下拉菜单添加填充
【发布时间】：2022-01-20 16:18:31
【问题描述】：

我一直在尝试调整剑道下拉菜单的填充。我上了单独的课并且 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 ;
}

【问题讨论】：

你能贴出你试过的 CSS 代码吗？
当然。大多数类都取自浏览器并进行了修改
尝试在适用于剑道元素的 css 规则之前添加::ng-deep，例如::ng-deep .k-dropdown .k-dropdown-wrap, .k-dropdowntree .k-dropdown-wrap。
谢谢这位先生，效果非常好！
太棒了！我根据我的评论在下面添加了一个答案。请接受它以结束问题。

标签： html css angular kendo-ui

【解决方案1】：

您的样式不会影响 Kendo 组件的内部样式的原因是视图封装。你可以阅读它here。

要穿透这种封装，您可以在任何访问组件内要设置样式的元素的 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 ;
}

【讨论】：

【解决方案2】：

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

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

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

【讨论】：