vue中修改v-html渲染的内容样式

<template>
	<div class="mainContainer" v-if="selectedData">
	    <h3>{{ selectedData.planetName }}</h3>
        <div class="planetImg">
          <img :src="`http://localhost:1337${selectedData.planetImg[0].url}`" alt="">
        </div>
        <div v-html="selectedData.planetDescription" class="description"></div>
    </div>
</template>

v-html中渲染了一些p标签, 想要对p标签的样式做一些修改,直接在style中修改没效果

.description {
  font-size: 14px;
  line-height: 22px;
   p {
     text-indent: 2em;
     margin-top: 8px;
   }
 }

需要使用/deep/才行, 具体如下

.description {
  font-size: 14px;
  line-height: 22px;
  /deep/p {
    text-indent: 2em;
    margin-top: 8px;
  }
}