更改 p-inputSwitch 标签和样式

inf*_*dev 5 html css primeng angular

我会改变Primeng库的p-inputSwitch组件的样式

我会得到这样的东西:

预期设计

这是我的代码:

<div class="contner">
    <div class="toggle-area">
        <p>SEARCH BY</p>
        <div >
        <p class ="toggle-inline">Business group</p>
        <div class="toggle-btn toggle-inline">
            <p-inputSwitch [(ngModel)]="checked"
            onLabel=""
            offLabel=""
            styleClass="ui-inputswitch"
            ></p-inputSwitch>
        </div>
        <p class="toggle-inline">Borrower</p>
        </div>
</div>
Run Code Online (Sandbox Code Playgroud)

我从删除标签开始,但宽度也发生了变化,我不知道如何增加它

我拥有的

Ant*_*ppe 2

我首先删除标签,但宽度也发生变化,我不知道如何增加它

覆盖 PrimeNGui-inputswitch类:

.ui-inputswitch {
  width: 80px !important;
}
Run Code Online (Sandbox Code Playgroud)

参见普朗克