Question

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开发工具显示在组件层次结构中，但未应用样式）。从我们的身份验证页面（使用“浅色”主题）向后导航时，仅在我们的门户网站中出现问题（ThemeProvider提供了“深色”主题）。

我已经查阅了styled-components github页面上的未解决和未解决的问题，没有发现与此问题相关的其他问题。 auth页面中的GlobalStyle组件相对于ThemeProvider的位置与PortalApp中的位置相同。

我们的门户网站：

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

还有我们的GlobalStyle组件：

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组件将样式应用于同一片段中的其他组件。

实际：将样式应用于初始页面加载，但不适用于更改路线（通过浏览器的后退按钮或通过链接）。

导航到页面时，为什么我的GlobalStyle组件未呈现？

0 个答案: