剑道角度开关宽度？

Question

我在 Angular 11 中使用 Kendo UI。我在几个地方使用了开关，但它们看起来不像示例中的开关。这是我的：

以下是 Telerik 网站上显示的默认设置：

正如你所看到的，比例有很大不同，我的更长更薄；我宁愿有默认的比例。我一遍又一遍地重复它，在我的生活中我找不到定义它的样式......我可以将宽度设置得更小，整个项目变得更小，但白点表示打开关闭状态然后离开控件的右侧并根据我设置的宽度部分或完全隐藏。

谁能指出我正确的地方来改变这种情况？如果您能...

编辑

我不完全确定要显示什么代码。我的 HTML 看起来像这样：

<kendo-switch [(ngModel)]="role.Map"
              [disabled]="role.Sync"
              (click)="OnRoleMapUpdated(role)">Map
</kendo-switch>

就我的主要样式中的样式而言：

.k-switch{
   width: 75px;
}

改变这就是我改变组件宽度的方式，但如果它变得比这个小，它就会开始遮住白色圆圈部分。

其他样式来自 Kendo 主题生成器生成的预编译 css 文件。它大约有 13,000 行长，但以下是以任何方式引用文本“switch”的样式：

.k-switch {
  border-radius: 5em;
  cursor: pointer;
  /*width: 5em;*/
  background: none;
  border: 0;
  outline: 0;
  display: inline-flex;
  overflow: hidden;
  vertical-align: middle;
  font-size: 0.75rem;
  user-select: none;
  text-align: left; }
  .k-switch [type='checkbox'] {
    display: none; }

.k-switch,
.k-switch-container,
.k-switch-handle {
  box-sizing: border-box; }

.k-switch-container {
  border-radius: 5em;
  padding: 3px 3px;
  border-width: 0;
  border-style: solid;
  flex: 1 0 auto;
  position: relative;
  outline: 0;
  transition: background-color 200ms ease-out 0s; }

.k-switch-handle {
  border-radius: 5em;
  width: 2em;
  height: 2em;
  border-width: 0;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  left: 0;
  transition: left 200ms ease-out 0s; }
  .k-ie .k-switch-handle {
    display: block; }

.k-switch-on .k-switch-handle {
  left: calc(100% - 2em); }
  .k-ie .k-switch-on .k-switch-handle,
  .k-edge .k-switch-on .k-switch-handle {
    left: 100%;
    margin-left: -2em; }

.k-switch-off .k-switch-handle {
  left: 0; }

.k-switch-label-on,
.k-switch-label-off {
  display: none;
  width: calc(100% + calc( -2em + -13px));
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  line-height: 2em;
  overflow: hidden; }

.k-switch-label-on {
  text-align: left;
  left: 8px; }

.k-switch-label-off {
  text-align: right;
  right: 8px; }

.k-rtl .k-switch.k-switch-on .k-switch-handle,
.k-switch[dir="rtl"].k-switch-on .k-switch-handle {
  left: 0; }

.k-rtl .k-switch.k-switch-off .k-switch-handle,
.k-switch[dir="rtl"].k-switch-off .k-switch-handle {
  left: calc(100% - 2em); }

.k-rtl .k-switch .k-switch-label-on,
.k-switch[dir="rtl"] .k-switch-label-on {
  text-align: right;
  left: initial;
  right: 8px; }

.k-rtl .k-switch .k-switch-label-off,
.k-switch[dir="rtl"] .k-switch-label-off {
  text-align: left;
  left: 8px;
  right: initial; }

.k-switch-handle {
  background-clip: padding-box; }
  .k-ie11 .k-switch-handle,
  .k-edge12 .k-switch-handle,
  .k-edge13 .k-switch-handle {
    background-clip: border-box; }

.k-switch-label-on,
.k-switch-label-off {
  text-shadow: none; }

.k-switch-on .k-switch-container {
  color: white;
  background-color: #731717; }

.k-switch-on .k-switch-handle {
  color: white;
  background-color: white; }

.k-switch-on:focus, .k-switch-on.k-state-focused {
  box-shadow: 0 0 1px 2px #b68686; }

.k-switch-on:hover .k-switch-container, .k-switch-on.k-state-hover .k-switch-container {
  color: white;
  background-color: #531111; }

.k-switch-on:hover .k-switch-handle, .k-switch-on.k-state-hover .k-switch-handle {
  color: white;
  background-color: white; }

.k-switch-on .k-switch-label-off {
  color: transparent; }

.k-switch-off .k-switch-container {
  color: black;
  background-color: #e4e7eb; }

.k-switch-off .k-switch-handle {
  color: black;
  background-color: white; }

.k-switch-off:focus, .k-switch-off.k-state-focused {
  box-shadow: 0 0 1px 2px #f1f3f5; }

.k-switch-off:hover .k-switch-container, .k-switch-off.k-state-hover .k-switch-container {
  color: black;
  background-color: #ced3db; }

.k-switch-off:hover .k-switch-handle, .k-switch-off.k-state-hover .k-switch-handle {
  color: black;
  background-color: white; }

.k-switch-off .k-switch-label-on {
  color: transparent; }

.k-switch {
  box-shadow: none; }
  .k-switch:focus .k-switch-container, .k-switch.k-state-focused .k-switch-container {
    outline: none; }
  .k-switch.k-state-disabled {
    cursor: default; }
  .k-switch[aria-readonly="true"] {
    pointer-events: none; }

在主 .k-switch 样式中，我确实尝试注释掉 width 属性，但这似乎没有任何区别。