文章/答案/技术大牛

发布

社区首页 >问答首页 >不能改变底色。

问不能改变底色。
EN

Stack Overflow用户

提问于 2022-08-23 09:02:47

回答 1查看 59关注 0票数 0

我在我的项目中使用下一个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;

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;

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

就像你在上面看到的，它不会改变背景

javascript

reactjs

next.js

baseweb

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-08-23 10:21:20

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

我所做的是在html标记中添加一个类，称为主题，它指示用户选择并存储主题名的当前主题，并使用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>
        );
    }
}

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;

globals.css

body {
    padding: 0;
    margin: 0;
}

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73455895

复制

相似问题

问不能改变底色。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不能改变底色。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不能改变底色。
EN