如何从 Angular 中的表情符号中删除边界。用 ngx-emoji 试过

Question

我想在我的 Angular 应用程序中显示表情符号，但没有边界或只有表情符号的边框。

像这样的 Angular 模板中的正常 HTML 代码不显示表情符号：

<p style="font-size:100px">&#128540;</p>
<p>I will display &#128540;</p>

我尝试从 npm 安装 @ctrl/ngx-emoji-mart。

安装成功后我尝试了这个：

<ngx-emoji [emoji]="{ id: 'face_with_rolling_eyes', skin: 2, native: true }" size="24"></ngx-emoji>

这显示了一个带有边框的表情符号。我不要边框，怎么去掉？

顺便说一句，我的应用程序中不需要像 ngx-emoi-mart 这样的额外库。我只需要展示一个笑脸表情和一个悲伤的表情。如何在 Angular 中执行此操作？

我添加了一个 stackblitz https://stackblitz.com/edit/angular-3gmd9q

Answer 1

ngx-emoji 将按钮标签添加到您的 html。您需要添加 css 以删除按钮样式。试试这个。

button.emoji-mart-emoji {
    background: white;
    border: 0;
}