Next.js中使用Base Web切换主题无法更改背景色问题求助

我在Next.js项目里做了主题切换按钮，点击后只能修改Base Web组件的颜色，但页面背景色不会跟着切换成黑色，相关代码如下：

_app.tsx #

import '../styles/globals.css';
import type { AppProps } from 'next/app';
import { Provider as StyletronProvider } from 'styletron-react';
import { LightTheme, BaseProvider, ThemeProvider, DarkTheme } from 'baseui';
import { styletron } from '../helpers/styletron';
import { useState } from 'react';

const THEME = {
    light: 'light',
    dark: 'dark',
};

function MyApp({ Component, pageProps }: AppProps) {
    const [theme, setTheme] = useState(THEME.light);
    return (
        <StyletronProvider value={styletron}>
            <BaseProvider
                theme={theme === THEME.light ? LightTheme : DarkTheme}
            >
                <Component
                    {...pageProps}
                    THEMES={THEME}
                    theme={theme}
                    settheme={setTheme}
                />
            </BaseProvider>
        </StyletronProvider>
    );
}

export default MyApp;

index.tsx #

import type { NextPage } from 'next';
import Navbar from '../components/Navbar';

interface props {
    THEMES: {
        light: string;
        dark: string;
    };
    settheme: any;
    theme: any;
}

const Home: NextPage<props> = ({ THEMES, settheme, theme }) => {
    return (
        <>
            <Navbar />
            <button
                onClick={() =>
                    settheme(theme === THEMES.dark ? THEMES.light : THEMES.dark)
                }
            >
                change
            </button>
        </>
    );
};

export default Home;

如图所示，背景色未发生切换：

原因分析 #

Base Web的BaseProvider只负责管理自身组件的主题样式，不会自动全局设置页面的背景色，需要手动根据主题状态修改全局样式或页面容器样式。

解决方法 #

方法1：全局CSS类切换 #

1. 在globals.css中添加主题对应的背景样式：

body.light-theme {
  background-color: #ffffff;
}

body.dark-theme {
  background-color: #000000;
}

2. 在_app.tsx中通过useEffect根据主题更新body的类名：

import '../styles/globals.css';
import type { AppProps } from 'next/app';
import { Provider as StyletronProvider } from 'styletron-react';
import { LightTheme, BaseProvider, DarkTheme } from 'baseui';
import { styletron } from '../helpers/styletron';
import { useState, useEffect } from 'react';

const THEME = {
    light: 'light',
    dark: 'dark',
};

function MyApp({ Component, pageProps }: AppProps) {
    const [theme, setTheme] = useState(THEME.light);

    useEffect(() => {
      const body = document.body;
      // 移除旧主题类，添加当前主题类
      body.classList.remove(`${THEME.light}-theme`, `${THEME.dark}-theme`);
      body.classList.add(`${theme}-theme`);
    }, [theme]);

    return (
        <StyletronProvider value={styletron}>
            <BaseProvider
                theme={theme === THEME.light ? LightTheme : DarkTheme}
            >
                <Component
                    {...pageProps}
                    THEMES={THEME}
                    theme={theme}
                    settheme={setTheme}
                />
            </BaseProvider>
        </StyletronProvider>
    );
}

export default MyApp;

方法2：内联样式直接设置 #

无需修改全局CSS，直接在_app.tsx的useEffect中修改body背景色：

useEffect(() => {
  document.body.style.backgroundColor = theme === THEME.light ? '#ffffff' : '#000000';
}, [theme]);

这种方式实现更快，但样式优先级低于CSS类，适合简单场景。

如果页面有自定义容器组件，也可以给容器组件根据主题设置背景色，效果一致。

内容的提问来源于stack exchange，提问作者Pratham