---

date: 2024-10-01 categories:

• vuepress tags:
• vuepress技巧

---

关于Vuepress自定义组件使用CSS样式

之前写了一个Memos的组件，里面是使用的TailwindCSS；后来又写了一个Vuepress热力图组件，因为想跟vuepress-theme-hope主题保持一致，发现TailwindCSS的样式跟主题样式有些冲突，索性干脆卸载了TailwindCSS，于是重写Memos组件也跟vuepress-theme-hope主题一样，可以使用主题的深色模式和主题色，这是就发现了一个问题纠结了两三天，Memos的内容循环使用DOM生成出来的，然而使用v-html渲染的DOM中的样式无法使用scoped中的样式,Vuepress生成的html里面都有个[data-v-*]之类的标识，导致不能使用scoped内的样式，查了好久才知道，这个时候就需要使用deep了，如下：

两个办法：

让自定义样式不使用scoped，这样自定义样式会覆盖主题样式，但是自定义样式会污染全局，影响其他组件，所以不推荐。

<style>
memos-container {
    @apply bg-white dark:bg-gray-900;
    @apply p-4;
    @apply rounded-lg;
}
</style>

使用deep，如下：

<style scoped>
:deep(memos-container) {
  @apply bg-white dark:bg-gray-900;
  @apply p-4;
  @apply rounded-lg;
  @apply shadow-md;
  @apply dark:shadow-none;
  @apply dark:border dark:border-gray-700;
  @apply w-full;
  @apply max-w-3xl;
}
</style>