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

Question

我一直在尝试调整 kendo 下拉菜单的填充大小。我单独拍了class 我也做了适当的填充，但没有结果。在浏览器中我也尝试过检查并在那里进行一些更改，当涉及到编辑器时，我复制了代码并把它放在我在浏览器中进行更改的编辑器中，最终无法正确执行填充。

我的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

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

如果你想让它只应用在你的组件中，我会把所有东西都包装在一个单独的 class 中，然后把它放在 ::ng-deep 中。这样，一旦您加载了该组件，样式就不会影响您网站上的所有其他内容。

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

Answer 2

您的样式不影响 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 ;
}

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

I'm unable add the padding for this kendo dropdown

html

css

angular

kendo-ui