下一个 JS 样式组件暗模式主题答案

【问题标题】：Next JS styled components dark mode themeing下一个 JS 样式组件暗模式主题
【发布时间】：2021-06-09 04:20:37
【问题描述】：

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

我正在使用带有 next js 和 use-dark-mode hook 的样式化组件来触发主题更改/检测

加载前切换全局样式

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;
    }
`

但是有像这样的简单样式组件

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

在页面加载时不会改变，并且保持浅色主题

在 _document.js 中也实现了 next-js 团队示例，说明如何将样式化组件用于 SSR，并且效果很好，但对于非全局暗模式的样式化组件，在页面后不会激活刷新了

谢谢

【问题讨论】：

标签： javascript reactjs next.js styled-components

【解决方案1】：

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

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};
    }
`

【讨论】：