javascript - 没有标签的 显示一个空的透明 样式 ui-button-text 覆盖其他文本

Question

我的网站上有以下代码:

<p-button (onClick)="deleteFile(attachment,user_agreement)" icon="fa fa-trash" iconPos="left" styleClass="ui-button-danger"></p-button>
<a href="{{attachment.filePath}}" target="_blank">{{attachment.originalFilename}} - {{attachment.fileSize/1024 | number:'1.1-2'}} KB - {{attachment.createTime | date:'short'}}</a>

按钮没有文字，只有一个垃圾桶图标

网页上显示的结果如下

但是，当我在文本“Contents.json”上单击鼠标时，会触发该按钮。

我检查了按钮，它显示生成了一个覆盖文本的“跨度”，如下面的屏幕截图所示

<span>分配了类“ui-button-text”。而 ui-button-text 有如下定义

body .ui-button .ui-button-text, body .ui-datepicker-buttonpane > button .ui-button-text {
    padding: 0;
    line-height: 2.25em;
    min-width: 100px;
    min-height: 2.25em;
    text-align: left;
}

我从不定义 css 样式的 ui-button-text 所以我不想修改内容。如何解决此按钮标签与以下可点击内容重叠的问题？

非常感谢!

Answer 1

“ui-button-text”由库内部自动添加，但我们可以通过 css 解决这个重叠问题。

您需要在

上再添加一个自定义类

<p-button (onClick)="deleteFile(attachment,user_agreement)" icon="fa fa-trash" iconPos="left" styleClass="ui-button-danger custom-class-for-override"></p-button>

作为引用，在上面的代码中添加了“custom-class-for-override”。在这个类上你可以写你的 css fot 按钮宽度和高度。