Uni-app Vue 中CSS问题整理合集

一、父组件设置子组件的样式：

一般情况下子组件内部负责各自样式。不过在很多场合里，我们也会要求父组件来修改子组件默认样式。

父组件可以通过传入class样式修改有限的样式，或者通过:deep深度修改子组件内部样式。

（在uni-app单文件中，通过在父组件中定义全局样式，无法实现修改。）

 

子组件 <HelloWorld >代码：

<script setup>
    const txt = '<p class="line3">第三行</p>'
</script>

<template>
    <div>
        <div class="line1">第一行</div>
        <div class="line2">第二行</div>
        <div v-html="txt"></div>
    </div>
</template>

<style scoped>
    .line1,
    .line3 {
        color: blue;
    }
</style>

父组件代码：

<template>
    <HelloWorld class="demo"/>
</template>

<style>
    /* 全局样式，无法修改子组件样式*/
    .line1 {
        font-size: 50px !important;
    }
</style>

<style scoped>
    /* 引入CSS样式，只能修改未定义color 的样式*/
    .demo {
        color: #ff0000 !important;
    }

    /* 深度控制子组件样式，它可以随意修改 */
    :deep(.line3) {
        font-size: 40px;
        color: #ccc;
    }
</style>