Stenciljs: маршрут к новому контенту и не может изменить фон - PullRequest
0 голосов
/ 18 апреля 2019

В настоящее время я создаю свой первый PWA с помощью Stencil, PWA Toolkit и Ionic 4. Я не могу объяснить себе поведение при переходе с одной страницы (ion-content) на другую страницу. Здесь ситуация:

CSS 1-я страница (app-home):

ion-content {
         --background: pink;
            }

CSS 2-я страница (данные приложения):

ion-content {
         --background: white;
}

С утверждением:

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

приложение меняется со страницы 1 на страницу 2. Но фон остается розовым и не меняется, как ожидается, на белый. Когда я обновляю URL «/ data», фон становится белым. Когда я вернусь на первую страницу, фон остается белым.

Что я делаю не так?

1 Ответ

1 голос
/ 22 апреля 2019

Это работает так, потому что в Stencil по умолчанию нет определения css, поэтому правило для селектора for ion-content применяется на вашей странице дважды.

Вам необходимо добавить каждый стиль с помощью селектора компонентов, чтобы правильно их охватить.

Например:

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

Подробнее о моделировании на трафарете здесь

...