如何解决StencilJS - 为什么在设置容器样式时某些样式例如背景颜色适用于所有元素?
我正在使用 Stencil JS 为我正在构建的微前端编写组件。我有一个 <dashboard-container>
,顾名思义,它包含我拥有的所有其他组件。
我正在尝试更改我的 index.html
正文的背景颜色,然后让所有其他元素、组件保持自己的样式。
问题是,如果我尝试将 background-color: red
应用到我的 <dashboard-container>
,其余的孩子也会继承背景颜色。
我希望如果我将背景颜色应用于父元素,子元素会保留自己的样式,但不会那样工作。
如何在没有子级继承的情况下设置组件样式?
我是这样设置的:
import { Component,h } from '@stencil/core';
@Component({
tag: 'lh-dashboards-container',styleUrl: 'lh-dashboards-container.scss',scoped:true
})
export class LhDashboardsContainer {
render() {
return (
<div class="lh-dashboards-container">
<lh-dashboards-navigation></lh-dashboards-navigation>
<lh-dashboards-cohort-finder></lh-dashboards-cohort-finder>
</div>
);
}
}
因此,如果我执行以下操作:
//lh-dashboards-container.scss
.lh-dashboards-container {
background-color:red;
}
每个子组件及其中的元素的背景都将更改为红色。
解决方法
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。