如何将自定义 CSS 添加到具有自己的内置 CSS 的 PrimeVue 组件？

Question

我正在尝试使用 PrimeVue 制作自定义对话框弹出窗口。但是我似乎无法绕过它附带的 CSS ；我想使用我自己的并只保留功能。

我无法在网上找到任何资源。我知道我理解错了，但我不知道是什么。这是文档：

https://www.primefaces.org/primevue/#/dialog

这是我的 Vue 代码。我添加了一个自定义 CSS class，但结果很不稳定。所以这就是为什么我觉得我需要让它忽略 PrimeVue 库附带的所有其他代码。它看起来就像这个文件中的其他 p-dialogs。

    <p-dialog v-model:visible="confirmationDialog" :closable="false" class="delete-dialog">
      <div>
        <span>{{ $t('title') }}</span>
      </div>
      <div>
        <span>{{ $t('body') }}</span>
      </div>
      <p-button
        class="p-button-text"
        @click="
          confirmationDialog = !confirmationDialog;
        "
        >{{ $t('close') }}</p-button
      >
      <p-button
        class="p-button-text"
        @click="
          confirmationDialog = !confirmationDialog;
          delete();
        "
        >{{ $t('delete') }}</p-button
      >
    </p-dialog>

这是 CSS

<style lang="scss">

.deletion-dialog {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 0px;
  position: relative;
  width: 312px;
  height: 289px;
  background: #ffdad4;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 28px;
  .deletion-dialog-text {
    padding: 0px;
    background: #ffdad4;
  }
}
.deletion-header {
  /* Auto layout */

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 0px;

  position: relative;
  width: 312px;
  height: 289px;
}

</style>

Answer 1

在 PrimeVue Discord 中找到了这个答案。

在 documentation 的样式部分，它具有内置的 css classes。如果在我的包装器 class 中使用，我可以为这个特定的 p-dialog 访问这些，如下所示：

.deletion-dialog {
  ...
  ...
  .p-dialog-header {
    ...
    ...
  }
}

如何将自定义 CSS 添加到具有自己的内置 CSS 的 PrimeVue 组件？

How do I add custom CSS to a PrimeVue component that has its own built in CSS?

css

frontend

vue.js

primevue