在 primeNg 单选按钮上设置样式

Question

我正在尝试使用 primeNg 样式 classes 在选定的单选按钮及其标签周围设置边框。我的 HTML 代码如下：

<div class="p-d-flex p-flex-column">
  <p-radioButton
    styleClass="radio-style"
    class="p-col"
    [(ngModel)]="form"
    [value]="true"
    label="true"
  ></p-radioButton>
  <p-radioButton
    styleClass="radio-style"
    class="p-col"
    [(ngModel)]="form"
    [value]="false"
    label="false"
  ></p-radioButton>
</div>

我的 SCSS 就像：

:host ::ng-deep .radio-style.p-radiobutton {
  border: thin solid green;
}

然而，最终结果只是这样： .

我希望绿色围绕整个事物，而不仅仅是框本身，并且只围绕选定的那个。（对于第二期，我尝试使用 p-label-active，但我不认为我做对了，因为它不起作用）

如何实现标签周围的边框，以及如何只在选定的单选按钮上添加边框？

stackblitz of the issue

编辑： 澄清一下，我正在寻找的期望影响是

编辑 2： 我找到了解决方法。如果存在，仍在寻找更好的答案。解决方法：使用自定义 class 和 ngClass，如 stackblitz 更新中所示。

HTML:

<div class="p-d-flex p-flex-column">
    <p-radioButton [ngClass]="{'selected':form===true}" styleClass="radio-style" class="p-col" [(ngModel)]="form"
        [value]="true" label="true"></p-radioButton>
    <p-radioButton [ngClass]="{'selected':form===false}" styleClass="radio-style" class="p-col" [(ngModel)]="form"
        [value]="false" label="false">
    </p-radioButton>
</div>

CSS:

.selected {
  border: thin solid green;
}

Answer 1

你关闭了，但你需要定位。p-radiobutton-box class

:host ::ng-deep .radio-style .p-radiobutton-box {
  border: 2px solid green ;
}

只是为了让样式可以重用我会把样式移到全局样式文件中

style.scss

.radio-style {
  .p-radiobutton-box {
    border: 2px solid green !important;
  }
}

update the selected style 
```css

p-radiobutton {
  .radio-style {
    .p-radiobutton-box {
      border: 2px solid green;
    }

    .p-radiobutton-box.p-highlight {
      border-color: red;
      background: orange;
    }
  }
}

demo

Answer 2

解决方案最终变得简单得多 - class 需要更进一步。

所以，HTML:

<div class="p-d-flex p-flex-column">
  <p-radioButton
    styleClass="radio-style"
    class="p-col" [ngClass]="{'selected':form}"
    [(ngModel)]="form"
    [value]="true"
    label="true"
  ></p-radioButton>
  <p-radioButton
    styleClass="radio-style"
    class="p-col" [ngClass]="{'selected':!form}"
    [(ngModel)]="form"
    [value]="false"
    label="false"
  ></p-radioButton>
</div>

然后 scss:

.selected {
     border: 2px solid green ;
}

在 primeNg 单选按钮上设置样式

Setting styles on primeNg radiobutton

css

radio-button

primeng

angular