跳过子类中的父背景，同时继承其他属性

Question

我不希望子类继承背景颜色为白色的直接父类背景颜色。相反，它应该跳过并从蓝色背景的父组件中获取背景颜色。当我在子类中使用透明背景时，它应该显示蓝色而不是白色。父类(白背景类(的其余属性应该继承，而不是子类中的白色背景。

我无法对父组件进行任何更改，但我可以使用 css 进行更改。

应用组件 ：

<div class="bluebackground">
<app-test>
</app-test>
</div>

组件：测试

BlueBackGround Start
<div class="whitebackground">
Some White Background Stuff that I need
<div class="child">
Here i want background which should skip the parent whitebackground and show blue color same as bluebackground class <br />      
</div>
</div>
BlueBackGround End

这是 Css

.child {
font-size: 2rem;
text-align: center;
color: green;
background:transparent;
}
.bluebackground{
background: blue;
font-size: 3rem;
}
.whitebackground {
background:white;
}

堆栈闪电战

https://stackblitz.com/edit/angular-ivy-hbfvjs

Answer 1

您可以尝试将 CSS 更改为以下内容

.child {
font-size: 2rem;
text-align: center; 
}
.bluebackground {
font-size: 3rem;
}
.whitebackground {
background:white;
color:yellow;
}
.bluebackground, .child {
background-color: blue;
}

工作示例：堆叠闪电战

更新

有一种将 CSS 选择器从应用程序组件包含到子组件的脏方法。

test.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css', '../app.component.css']   // <-- include `app.component.css` here
})
export class TestComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

现在，您可以在测试组件中使用bluebackground选择器。

test.component.html

BlueBackGround Start
<div class="whitebackground">
Some White Background Stuff that I need
<div class="child bluebackground">     <!-- include `bluebackground` here -->
Here i want background which should skip the parent whitebackground and show blue color same as bluebackground class <br />      
</div>
</div>
BlueBackGround End

我已经修改了你的堆栈闪电战

更新：encapsulation

您可以在 app.component 中将encapsulation设置为ViewEncapsulation.None，并将child选择器重命名为在子项中bluebackground。尝试以下操作

app.component.ts

import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ],
encapsulation: ViewEncapsulation.None     // <-- set `ViewEncapsulation.None` here
})
export class AppComponent  {
...
}

test.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

test.component.css

/* overwrite/introduce values to the `bluebackground` specific to test component */ 
.bluebackground {
font-size: 2rem;
text-align: center; 
}
.whitebackground {
background:white;
color:yellow;
}

test.component.html

BlueBackGround Start
<div class="whitebackground">
Some White Background Stuff that I need
<div class="bluebackground"> 
Here i want background which should skip the parent whitebackground and show blue color same as bluebackground class <br />      
</div>
</div>
BlueBackGround End

工作示例：堆叠闪电战

Answer 2

尝试如下：

<div class="bluebackground">
Blue Background Start
<div class="whitebackground">
Some White Background Stuff that I need
<div class="child bluebackground">
Here i want background which should skip the parent whitebackground and show blue color same as mainbackground class <br />      
</div>
</div>
Blue Background End
<div>

工作演示

Answer 3

感谢Michael D的投入。

这就是我解决它的方式

我不得不将白色背景颜色从白色背景类移动到称为新白色背景类的新类。

目录

BlueBackGround Start
<div class="whitebackground">
<div class="newwhitebackground">
Some White Background Stuff that I need
</div>
<div class="child">
Here i want background which should skip the parent whitebackground and show blue color same as bluebackground class <br />      
</div>
</div>
BlueBackGround End

.CSS

.child {
font-size: 2rem;
text-align: center; 
background:transparent;
}
.whitebackground {
color:yellow;
}
.newwhitebackground {
background-color:white;
}

这是堆栈闪电战https://stackblitz.com/edit/angular-ivy-pyhqwr