VueJS - Apply a specific CSS style inside a component

Question

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>

Your JavaScript isn't in a tag

doc-han
– doc-han

2019-07-27 08:04:01 +00:00
Commented Jul 27, 2019 at 8:04 — doc-han
– doc-han, Commented Jul 27, 2019 at 8:04

marc_s · Accepted Answer · 2019-08-11 05:58:42Z

2

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>

edited Aug 11, 2019 at 5:58

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Jul 27, 2019 at 8:08

coffidev

9998 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJS - Apply a specific CSS style inside a component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related