如何在旋转木马内锁定HTML标签

Question

我有一个小问题，关于 BootstrapVue旋转木马:

如何将HTML标签定位在 b-carousel-slide 组件来改变字体大小等？

我知道你可以通过使用的 text-tag 道具（见我的代码示例）。

如果这个问题很容易解决，或者至少有人给我指出文档中的相关部分，那就太好了。

<template>
  <div>
    <b-carousel
      id="carousel"
      :interval="3000"
      controls
      fade
      indicators
      background="#ababab"
      img-width="1024"
      img-height="480"
    >
      <b-carousel-slide
        v-for="item in services"
        :key="item.title"
        :caption="item.title"
        :text="item.description"
        text-tag="p"
        :img-src="require(`../assets/images/${item.image}`)"
      ></b-carousel-slide>
    </b-carousel>
  </div>
</template>

<script>
  export default {
    name: 'Carousel',
    data() {
      return {
        services: [
          {
            title: 'Title',
            description:
              'Text',
            image: 'picture.jpg',
          },
          {
            title: 'Title',
            description: `Text`,
            image: 'picture.jpg',
          },
          {
            title: 'Title',
            description: `Text`,
            image: 'picture.jpg',
          },
          {
            title: 'Title',
            description: `Text`,
            image: 'picture.jpg',
          },
        ],
      };
    },
  };
</script>

<style scoped>
  p {
    color: 'red';
  }
</style>

Answer 1

你所面临的问题是试图在一个范围内的样式标签中锁定一个子组件。

要做到这一点，你需要使用 深层选择器.

其中任何一个都应该可以。

<style scoped>
  /deep/ p {
    color: 'red';
  }

  >>> p {
    color: 'red';
  }

  ::v-deep p {
    color: 'red';
  }
</style>