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: Применяет стили при начальной загрузке страницы, но не при изменении маршрута (либо черезкнопка возврата браузера или ссылки).