CODEWITHSUNDEEP
cssvue.js
Maxiss
Maxiss

Reputation: 1056

VueJS - Apply a specific CSS style inside a component

I defined styles for my website.

I also include specific content, which is written with a WYSIWYG editor by the users.

This content should have a specific style, but not erase the style of the rest of the website.

I tried using but then no style is applied at all. is there any way to apply a specific style to this content?

<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>

Upvotes: 0

Views: 93

Answers (1)

coffidev
coffidev

Reputation: 999

The scoped styles in view only work for the elements that are present on the component on the template, but not for dynamic content.

I would recommend you to use some id cascade, for example declare an id for your section like this:

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

This can be accomplish better using some css preprocessor like sass

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

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

Upvotes: 2

Related Questions