我如何从父组件设计我的子组件? [英] How can i style my child components from parent?

问题描述

我有父组件和子组件.当我在另一个组件中使用我的 html 时，我使用了我的 css.

例如在我的父组件中

HTML

<p类=标签">标签1</p>

CSS

.chips .tags {红色;}

一切正常.但是当我用另一个组件这样做时

<app-child></app-child>

来自子组件的 HTML

Tag 1

那我就看不到红色了.

我该如何解决这个问题?

解决方案

你可以把 .css 放在共享所有应用程序的 style.css 中.

另一种选择是使用 ::ng-deep 但我不太喜欢

最后一个是使用像这样的 css 变量 Netanel Basal 的文章

//在你的父级.chips 应用子{--bgcolor:红色；}//在你的孩子.tags{background-color:var(--bgcolor,pink)//<--使用粉红色"；按缺陷}

a 傻瓜示例

I have parent and child component. Moment when i use my html in another component i use my css.

I have for example in my parent component

HTML

<div class="chips">
    <p class="tags">Tag 1</p>
</div>

CSS

.chips .tags {
   color:red;
}

and everything works fine. But when i do this with another component

<div class="chips">
    <app-child></app-child>
</div>

HTML FROM CHILD COMPONENT

<p class="tags">Tag 1</p>

then i don't get the red color.

How can i solve this ?

解决方案

You can put the .css in the styles.css that share all the aplication.

Another option is use ::ng-deep But I don't like so much

The last one is use css variables like this Netanel Basal's article

//in your parent
.chips app-child{
    --bgcolor:red;
}

//in your child
.tags
{
   background-color:var(--bgcolor,pink) //<--use a "pink" by defect
}

a fool example

这篇关于我如何从父组件设计我的子组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！