Stenciljs:路由到新内容并且不能更改背景 [英] Stenciljs: route to new content and cannot change background

问题描述

我目前正在使用Stencil，PWA Toolkit和Ionic 4创建我的第一个PWA. 从一页(离子含量)切换到另一页时，我无法解释自己的行为. 情况如下:

I'm currently creating my first PWA with Stencil, PWA Toolkit and Ionic 4. I can not explain myself a behavior when switching from one page (ion-content) to another page. Here the situation:

CSS第1页(应用首页):

CSS 1st page (app-home):

ion-content {
         --background: pink;
            }

CSS第二页(应用数据):

CSS 2nd page (app-data):

ion-content {
         --background: white;
}

带有以下语句:

this.router.push ('/data', 'forward');

该应用程序从第1页更改为第2页.但是背景仍然是粉红色，并且没有像预期的那样变为白色. 当我刷新网址"/data"时，背景变成白色.然后，当我返回首页时，背景 保持白色.

the app changes from page 1 to page 2. But the background remains pink and does not change as expected to white. When I refresh the url "/data" the background becomes white. When I then return to the first page the background remains white.

我在做什么错了?

推荐答案

它之所以如此工作，是因为默认情况下Stencil中没有CSS作用域，因此在页面中两次应用了ion-content选择器的规则.

It works this way because there are no css scoping in Stencil by default so rule for the for ion-content selector is applied twice in your page.

您需要在每个样式之前添加一个组件选择器，以正确确定它们的范围.

You need to prepend each style with a component selector to correctly scope them.

例如:

app-home ion-content {
  --background: pink;
}

在此处

这篇关于Stenciljs:路由到新内容并且不能更改背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！