Ngprime 修复按钮的大小

Question

我正在构建一些 primeng 按钮，但它们对于我的项目来说太大了。我在文档中看到我可以使用

<p-button label="Small" icon="pi pi-check" styleClass="p-button-sm"></p-button>

但是当我使用这些按钮的其他属性时，我正在使用

<button> 

而不是

<p-button>

尝试使用样式（宽度和高度），但按钮内的文本不会改变其大小。有办法实现这一点吗？我附上按钮的代码：

<span class="p-buttonset">
        <button pButton pRipple label="Mapa" class="p-button-outlined p-button-secondary"
            style="background-color: rgba(255, 255, 255, .65); color:darkslategray ;" (click)="cambiarTipo(0)" ></button>
        <button pButton pRipple label="Satélite" class="p-button-outlined p-button-secondary"
            style="background-color: rgba(255, 255, 255, .65); color: darkslategray;" (click)="cambiarTipo(1)"></button>

    </span>
    &nbsp;

    <button pButton pRipple label="Zonas prohibidas" class="p-button-outlined p-button-secondary"
        style="background-color: rgba(255, 255, 255, .65); color:darkslategray ;" (click)="prohibidas()"></button>
    &nbsp;<button pButton pRipple label="Ver puntos" class="p-button-outlined p-button-secondary"
        style="background-color: rgba(255, 255, 255, .65); color:darkslategray ;" (click)="mostrarTabla()">
    </button>
    &nbsp;

    <div class="p-inputgroup" >
    <p-inputNumber inputStyleClass="black" [(ngModel)]="tiempoIsocronas" mode="decimal" placeholder="Tiempo isocronas"
        [useGrouping]="false" [disabled]="lista.length!=1" [inputStyle]="{border:'1px solid darkslategray',background:'rgba(255, 255, 255, .65)'}">
    </p-inputNumber> <button pButton pRipple type="button" icon="pi pi-search"
        class="p-button-outlined p-button-secondary" (click)="llamarServicio(listaMetodos.isocronas)"
        [disabled]="lista.length!=1" style="background-color: rgba(255, 255, 255, .65); color:darkslategray ;">
    </button> </div>

Answer 1

• 使用这个CSS

:host ::ng-deep .p-button{
  font-size:30px;  //your font size here
}

Answer 2

我遇到了类似的问题。官方网站 https://primeng.org/theming 上的文档建议对我有用的答案是，在你的主 CSS 文件中：

html{
font-size: <your desired font size>
}

组件最初基于 16px 的字体大小，所以我个人使用了 12 并且喜欢它。但是，这将更改应用程序中所有组件的大小。如果您只想更改按钮的大小，您可以使用以下命令将它们隔离

.p-button{
font-size: <your desired font size>
}