如何以范围样式更改css父级？

Posted 2023-02-23

【中文标题】如何以范围样式更改css父级？

【英文标题】：how to change css parrent in scoped style?

【发布时间】：2020-11-21 03:35:10

【问题描述】：

我想更改 child 中的父 css 类，并在离开时重置它，怎么做？ 父组件：

<template>
    <p id="parent" class="parent-text-color"> my text is red </p>
    <router-view />
</template>

<style>
.parent-text-color 
    color: red;

</style>

组件子 A：

<template>
    <p>child a</p>
</template>

组件子 B：

<template>
    <p>child b</p>
</template>

<style>
.parent-text-color 
    color: blue

</style>

样式在 child-B 中，没有变化

转到孩子 a：文字是红色的 转到孩子 b：文本是红色的 转到孩子 a：文字是红色的

样式不在 child-B 范围内，离开 child-B 后文本没有变化

在子 a 上：文本为红色 在子 b 上：文本为蓝色 在子 a 上：文本为蓝色

如何解决？

部分解决方案

beforeMount () 
    document.getById('parrent').classList.add('parrent-changed-color')

beforeDestory () 
    document.getById('parrent').classList.remove('parrent-changed-color')

或在模板中添加样式标签

<template>
    <style>
    .parent-text-color 
        color: blue
    
    </style>
    <p>child b</p>
</template>

但我不喜欢这个...

【参考方案1】：

一种可能的方法是使用条件类和一些事件通知：

父组件：

<template>
    <p id="parent" v-bind:class=" parent: !hasChild, child: hasChild " v-on:my-event="doSomething">this is my text</p>
    <router-view />
</template>

<style>
.parent 
    color: red;

.child 
    color: blue;

</style>

<script>
// ...
  methods: 
    doSomething (event) 
      this.hasChild = event.hasChild
    
  
</script>

子组件：

<template>
    <p>child b</p>
</template>

<script>
  // ...
  beforeMount () 
    this.$emit('my-event',  hasChild: true )
  ,
  beforeDestory () 
    this.$emit('my-event',  hasChild: false )
  
</script>

我认为主要目标是使组件与彼此的实现细节无关（意思是：组件不一定要知道其他组件使用的类名是什么）。

【讨论】：

谢谢，但不是我真正想要的，不是真正的组件，路由页面可以更改 CSS 网格布局，谢谢 annyway ;)