Question

我正在使用ngx-ui-switch来切换按钮。我想为按钮提供自定义尺寸。

此插件会生成一些在我的项目文件夹中找不到的css。

如果我尝试手动更改，.switch-small[_ngcontent-c20] {size:40px}无效。请帮忙

原始HTML

<ui-switch [checked]="staticProposalFlag" (change)="onProposalChange($event)" size="small" class="float-left" switchColor="#D9D9D9" color="#1D79D1"></ui-switch>

生成的HTML

<ui-switch _ngcontent-c13="" class="float-left" color="#1D79D1" size="small" switchcolor="#D9D9D9" _nghost-c20="" ng-reflect-size="small" ng-reflect-color="#1D79D1" ng-reflect-switch-color="#D9D9D9" ng-reflect-checked="true">
  <span _ngcontent-c20="" class="switch checked switch-small" style="background-color: rgb(29, 121, 209); border-color: rgb(223, 223, 223);">
    <small _ngcontent-c20="" style="background: rgb(217, 217, 217);">
    </small>
    </span>
</ui-switch>

Answer 1

对于想要更改UI切换的CSS的用户，请同时使用::ng-deep和!important。只有这种情况适用于我的情况。

示例：

::ng-deep .switch-small.checked small {
    left: 16px !important;
}

Answer 2

您无法使用之前添加的ng标识符更改组件本身的CSS，因此请尝试添加真实类而不是float left这是一种样式规则。创建一个类customSwitch（替换float:left）。并在你的CSS添加 .switchCustom { float:left; width: 100px } +删除size=small它看起来像是在尝试设置宽度时可能存在冲突的参数。

Answer 3

在单击后，UI开关创建黑色边框/轮廓时出现问题，我可以确认krithika的上述解决方案有效：

::ng-deep button.switch {
  outline: none !important;
}

更改ngx-ui-switch angular 2的按钮样式

3 个答案: