vue에서 v-html에 포함된 class의 css가 적용되지 않는 경우
<div class="container">
<div v-html="내용"></div>,
</div>
...
내용 = <p class="line"></p>
...
<style scoped>
.line {
color: red;
}
</style>
이런식으로 v-html을 사용하면 .line의 css가 적용이 안되는 경우가 있는데, scoped 때문이다.
<style>
.container .line {
color: red;
}
</style>
scoped를 제외하고 style 태그를 한 번 더 써서 정의해주면 된다.
단, 다른 컴포넌트에 같은 이름의 class가 있으면 영향받지 않게 정확하게 정의해줘야 한다.