如何从子组件 Vue.js 3.x 设置 <slot> 样式答案

【问题标题】：How to style a <slot> from child component Vue.js 3.x如何从子组件 Vue.js 3.x 设置 <slot> 样式
【发布时间】：2021-09-18 08:48:03
【问题描述】：

我正在尝试使用标签设置插入子组件的 p 标签的样式。

父代码

<template>
  <BasicButton content="Test 1234" @click="SendMessage('test')" height="10" width="50" />
  <TransparentTopbar />
  <BasicContainer width="90">
    <p class="p-blueish-gray">{{ LorumIpsum() }}</p>
  </BasicContainer>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Homepage from "./components/home/Homepage.vue";
import TransparentTopbar from "./components/tools/topbar/TransparentTopbar.vue";
import BasicButton from "./components/tools/button/BasicButton.vue";
import BasicContainer from "./components/tools/container/basic_container/BasicContainer.vue"
//import func from "vue-temp/vue-editor-bridge";

export default defineComponent({
  name: "App",
  components: {
    Homepage,
    TransparentTopbar,
    BasicButton,
    BasicContainer
  },
  methods: {
    SendMessage: sendMessage,
    LorumIpsum: lorumIpsum
  },
});

子代码

<template>
    <div class="light-rounded-container card-margins" :style="container_style">
        <slot></slot>
    </div>
</template>

<script lang="ts" src="./BasicContainer.ts" />
<style scoped src="./BasicContainer.css" />

import { defineComponent } from 'vue';

export default defineComponent({
    name: 'BasicContainer',
    props: {
        width: {
            type: Number,
            default: 90,
            required: false
        }
    },
    data() {
        return {
            container_style: {
                width: this.width.toString() + '%'
            }
        }
    },
    methods: {}
});

.light-rounded-container {
    background-color: #242629;
    border-radius: 15px;
    align-self: center;
}

::v-slotted(p) {
    color:red !important;
    width: 1% !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
    padding-top: 25px !important;
    padding-bottom: 15px !important;
}

BasicContainer 组件是我尝试在其上设置插槽内容样式的组件。我想在父组件中设置我传递给这个组件的 p 标签的样式，但我想在这个子组件中设置它的样式。

【问题讨论】：

只需使用基本的 CSS 选择器 .light-rounded-container > p
如果这有效，我会非常高兴。不幸的是，我已经尝试过了，只是再次确认它不起作用。
是的。你的样式标签有作用域吗？
@StevenB。你是对的。我在单独定义的 NON-SCOPED .css 文件中没有我的风格。在将我的样式移入他们的样式并重新构建我的 HTML 以避免将 css 样式渗透到其他全局范围之后，它起作用了。非常感谢。

标签： javascript typescript vue.js

【解决方案1】：

@StevenB。你是对的。我在单独定义的 NON-SCOPED .css 文件中没有我的风格。在将我的样式移入他们的样式并重新构建我的 HTML 以避免将 css 样式渗透到其他全局范围之后，它起作用了。非常感谢。

【讨论】：