Почему мой компонент GlobalStyle не отображается при переходе на страницу? - PullRequest
0 голосов
/ 02 июля 2019
System:
 - OS: macOS 10.14.5
 - CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
 - Memory: 1.55 GB / 16.00 GB
 - Shell: 5.3 - /bin/zsh
Binaries:
 - Node: 10.15.3 - /usr/local/bin/node
 - Yarn: 1.15.2 - /usr/local/bin/yarn
 - npm: 6.9.0 - /usr/local/bin/npm
npmPackages:
- styled-components: ^5.0.0-beta.2 => 5.0.0-beta.2

Приложение создано с использованием create-react-app и использует router5/react-router5 для маршрутизации.

Похоже, что наш GlobalStyleComponent не отображается при изменении маршрута (ни с помощью кнопки возврата браузера, ни черезСсылки. Компонент отображается в иерархии компонентов с помощью инструментов Chrome React dev, но стили не применяются).Эта проблема возникает только на нашем портале (где наша ThemeProvider предоставляет «темную» тему) при переходе назад от наших страниц аутентификации (которые используют «светлую» тему).

У меня естьпросмотрел открытые и закрытые вопросы на странице styled-components github и не нашел других проблем, связанных с этой проблемой.GlobalStyle компоненты на страницах авторизации расположены в том же положении относительно ThemeProvider, что и в PortalApp.

Наш портал:

export default function PortalApp() {
  return (
    <ThemeProvider theme={{ ...theme, mode: 'dark' }}>
      <>
        <GlobalStyle />
        <Layout>
          <Suspense fallback={null}>
            <Router />
          </Suspense>
        </Layout>
      </>
    </ThemeProvider>
  )
}

И наш GlobalStyle component:

import { createGlobalStyle } from 'styled-components'
import { rootFontSize } from '../utils/text'
import { Theme } from './theme'

const GlobalStyle = createGlobalStyle<{ theme: Theme }>`
  html {
    font-size: ${rootFontSize}px;
  }

  body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-open-sans);
    color: ${({ theme }) => theme && theme.text.color};
  }

  #root {
    height: 100%;
  }

  main {
    display: block;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  [hidden] {
    display: none !important;
  }

  template {
    display: none;
  }

  *,
  *::after,
  *::before {
    box-sizing: border-box;
  }
`

export default GlobalStyle

Ожидается: GlobalStyle компонент применяет стили к другим компонентам в том же фрагменте.

Actual: Применяет стили при начальной загрузке страницы, но не при изменении маршрута (либо черезкнопка возврата браузера или ссылки).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...