miaolz123 / vue-markdown

A Powerful and Highspeed Markdown Parser for Vue
https://miaolz123.github.io/vue-markdown/
MIT License
1.89k stars 257 forks source link

Scoped class does not work on vue-markdown component #28

Open maziarz opened 7 years ago

maziarz commented 7 years ago

When i attach a class to the vue-markdown component it is not being styled accordingly.

Example:

<template lang="pug">
    vue-markdown(:source="mydata", class="vue-md")
</template>

<script>
import VueMarkDown from 'vue-markdown'

export default {
    components: {
        VueMarkDown
    }
}
</script>

<style lang="scss" scoped>
.vue-md {
    color: yellow !important;
}
</style>
miaolz123 commented 6 years ago

I run this code and get HTML script like this, which look like all right:

<div class="vue-md">what you define in "mydata"<div>

May you paste the HTML script you got ? thx~

beeequeue commented 6 years ago

I've run into the same problem.

This happens due to the behavior of setting <style> tags to scoped. This gives all elements in the component a unique data-v-[hash] property, which isn't being set on the children of vue-markdown.

Example

Evild67 commented 6 years ago

Same problem for me. As a workaround, i add my scoped css in my global css file

blackchineykh commented 4 years ago

Same problem for me. As a workaround, i add my scoped css in my global css file

This worked for me