Javascript 下一个JS样式的组件暗模式主题化

这可能有答案，但我找不到

我在nextjs中使用样式化组件，并使用暗模式钩子触发主题更改/检测

加载前切换全局样式

import { createGlobalStyle } from "styled-components";

export const GlobalStyles = createGlobalStyle`
    body {
        background: ${props => props.theme.background};
        color: ${props => props.theme.color};
        font-family: Roboto, sans-serif;
        margin: 0;
        padding: 0;
    }
`

export const GlobalStyles = createGlobalStyle`
    body {
        background: ${props => props.theme.background};
        color: ${props => props.theme.color};
        font-family: Roboto, sans-serif;
        margin: 0;
        padding: 0;
    }
    
    ${BackgroundTopAppBar} {
        background-color: ${props => props.theme.appBarHeaderBackground};
    }
`

但是有这样一个简单样式的组件

const BackgroundTopAppBar = styled.header`
    background-color: ${props => props.theme.appBarHeaderBackground};
`;

页面加载时不会更改，主题颜色保持浅色

此外，在_document.js中还实现了下一个js团队示例，该示例介绍了如何在SSR中使用样式化组件，并且效果良好，但对于非全局暗模式的样式化组件，页面刷新后不会激活

---

感谢您

对于任何正在寻找解决方案的人，请使用GlobalStyles并在其中修改元素的当前颜色，因为GlobalStyles将在加载之前应用它

import { createGlobalStyle } from "styled-components";

export const GlobalStyles = createGlobalStyle`
    body {
        background: ${props => props.theme.background};
        color: ${props => props.theme.color};
        font-family: Roboto, sans-serif;
        margin: 0;
        padding: 0;
    }
`

export const GlobalStyles = createGlobalStyle`
    body {
        background: ${props => props.theme.background};
        color: ${props => props.theme.color};
        font-family: Roboto, sans-serif;
        margin: 0;
        padding: 0;
    }
    
    ${BackgroundTopAppBar} {
        background-color: ${props => props.theme.appBarHeaderBackground};
    }
`