个人中心
gpt4 book ai didi

reactjs - chakra ui 自定义主题在我的下一个 js 项目中根本不起作用

转载 作者：行者123 更新时间：2023-12-05 05:41:38 27 4
gpt4 key购买 nike

我正在尝试使用 chakra UI 构建 nextjs 项目，但我的自定义主题根本不起作用，我已经尝试了 chakra 文档中的所有内容，甚至我添加的自定义颜色也不起作用，但默认脉轮的颜色工作正常，我想知道我已经使用脉轮文档设置了暗/亮模式，如果它与我的问题有关

My theme.js file

import { extendTheme } from "@chakra-ui/react";
import { mode } from "@chakra-ui/theme-tools";

const styles = {
  global: (props) => ({
    body: {
      bg: mode("#a8dadc", "#006d77")(props),
      color: mode("#006d77", "#a8dadc")(props),
    },
  }),
};

const colors = {
  primary: "#e29578",
};

const theme = extendTheme({ styles, colors });
export default theme;

My index.tsx file

import {
  Box,
  Button,
  useColorMode,
  Text,
} from "@chakra-ui/react";
import type { NextPage } from "next";
import Head from "next/head";


const Home: NextPage = () => {
  const { colorMode, toggleColorMode } = useColorMode();

  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <h1>Home Page</h1>
      <Box mb={4}>This boxs style will change based on the color mode.</Box>
      <Button onClick={toggleColorMode} color="primary">
        Toggle {colorMode === "light" ? "Dark" : "Light"}
      </Button>
      <Text fontSize="6xl" color="primary">
        {" "}
        Custom color not working
      </Text>
    </div>
  );
};

export default Home;

My _app.tsx file

import type { AppProps } from "next/app";
import { ChakraProvider } from "@chakra-ui/react";

import { Chakra } from "../components/wrappers/Chakra";
import theme from "../libs/theme";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider theme={theme}>
      <Chakra cookies={pageProps.cookies}>
        <Component {...pageProps} />
      </Chakra>
    </ChakraProvider>
  );
}

export { getServerSideProps } from "../components/wrappers/Chakra";

export default MyApp;

最佳答案

我也有同样的问题!

我注意到有一些默认的 css 变量附加到 :root，而 ChakraProvider 默认情况下无法覆盖它们，因此我将 cssVarsRoot 设置为解决方法。

  <ChakraProvider theme={theme} cssVarsRoot="body">

关于reactjs - chakra ui 自定义主题在我的下一个 js 项目中根本不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/72246624/

27 4 0
文章推荐： python - Groupby 多列和 Sum - 创建新列并添加 If 条件
文章推荐： java - 如何在控制台中输出多行字符图像
文章推荐： python - 找不到 pandas.read_html 表
文章推荐： javascript - UnsupportedError : cannot produce video at Transport. 产生
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com