Question

我为我的网站定义了样式。

我还包括特定内容，这些内容由用户使用所见即所得（WYSIWYG）编辑器编写。

此内容应具有特定的样式，但不能删除网站其余部分的样式。

我尝试使用，但是根本没有应用任何样式。有什么方法可以将特定样式应用于此内容？

<template>
    <div id="content">
        <div class="content" v-html="content"></div>
    </div>
</template>

export default {
    name:'content',
    props: {
      content: {
          type: String,
          default: '<div>Contenu à définir</div>'
      }
    }
}

<style scoped>

h1, h2, h3 {
    color: #94c946;
    margin:0;
    font-family: 'Montserrat-ExtraBold';
    vertical-align:baseline

  button{
    font-family: 'Montserrat-ExtraBold';
    border-radius: 100px;
    background-color: #94c946;
    color: #1B1B1B;
  }

</style>

Answer 1

视图中的作用域样式仅适用于模板上组件上存在的元素，而不适用于动态内容。

我建议您使用一些id级联，例如，为您的部分声明一个id，如下所示：

<style>
#content button { .... }
#content h1, #myEditor h2 {....} 
</style>

使用一些像sass这样的css预处理器可以更好地完成

<style lang="sass">
#content
  button
    ....

  h1, h2, h3
    ....
</style>

VueJS-在组件内应用特定的CSS样式

1 个答案: