无法更改基础网络中的背景颜色答案

【问题标题】：can't change background colour in base web无法更改基础网络中的背景颜色
【发布时间】：2022-08-23 18:21:20
【问题描述】：

我在我的项目中使用下一个 js，当我创建一个按钮来更改颜色时，它们只会更改基本 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;

索引.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;

当我单击按钮时，它不会将背景颜色更改为黑色

就像你在上面看到的那样不改变背景

尝试在 MyApp 组件中添加console.log(theme)，查看状态是否正在更新
它正在改变我不知道问题是什么

标签： javascript reactjs next.js baseweb

【解决方案1】：

不知道这是最好的方法，但它的工作

我所做的是在 html 标记中添加一个名为 theme 的类，它指示用户选择的当前主题并将该主题名称存储在 localstorage 中，并使用 css 根据 html 类名称添加背景颜色

如果有人有更好的解决方案，请不要犹豫分享。

_app.tsx

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 { useEffect, useState } from 'react';

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

function MyApp({ Component, pageProps }: AppProps) {
    const [theme, setTheme] = useState<string>('');
    useEffect(() => {
        if (typeof window !== 'undefined') {
            !localStorage.getItem('theme')
                ? localStorage.setItem('theme', 'dark')
                : '';
            let user_themes = localStorage.getItem('theme');
            document
                .getElementById('theme')
                ?.classList?.add(user_themes || theme);
            setTheme(user_themes || theme);
        }
    }, []);
    useEffect(() => {
        if (theme) {
            document
                .getElementById('theme')
                ?.classList?.remove(
                    theme === THEME.dark ? THEME.light : THEME.dark
                );
            document.getElementById('theme')?.classList?.add(theme);
            localStorage.setItem('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;

_document.tsx

import Document, { Html, Head, Main, NextScript } from 'next/document';

export default class CustomDocument extends Document {
    render() {
        return (
            <Html id='theme'>
                <Head />
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

索引.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;

全局的.css

body {
    padding: 0;
    margin: 0;
}

html.dark {
    background: rgba(12, 12, 12);
}

html.light {
    background: rgb(252, 252, 252);
}

【讨论】：