不能在 extendTheme (ChakraUI) 中使用默认颜色

问题描述

我正在尝试这样做：

import { extendTheme } from "@chakra-ui/react";
import Fonts from "./Fonts";

const theme = extendTheme({
  fonts: {
    logo: "Satisfy",},colors: {
    main: {
      500: "red.500",});

但是当像这样使用它时它不起作用（main.500不被识别）：

function logo() {
  return (
    <Center as={(props) => <Link {...props} to="/" />} h="full" p="10">
      <heading
        fontFamily="logo"
        as="h1"
        fontSize="4xl"
        fontWeight="bold"
        color="main.500"
      >
        My Recipes
      </heading>
    </Center>
  );
}

正确的做法是什么？谢谢。

解决方法

以下是如何使用默认颜色的示例：

App.js

import React from 'react';
import ReactDOM from 'react-dom';
import { ChakraProvider } from "@chakra-ui/react";
import theme,{ Theme } from "@chakra-ui/theme";
import { extendTheme } from "@chakra-ui/react";

import Chakra from "./Test-Chakra.js"

export default function App() {
const theme = extendTheme({
  fonts: {
    logo: "Satisfy",},colors: {
    main: {
      500: "#00dd00",900: "#dd3333",})

return (
    <>
      <ChakraProvider theme={theme}>
        <Chakra />
      </ChakraProvider>
    </>
  );
}

ReactDOM.render(<App />,document.getElementById('root')
);

Test-Chakra.js - 使用此代码，您现在可以根据需要将颜色更改为 main.500（自定义颜色）或 red.500（默认颜色）。

import React from 'react';
import { Center,Heading } from "@chakra-ui/react"
import theme,{ Theme } from "@chakra-ui/theme"

export default function Chakra(props) {

return (
<>
    <Center >
      <Heading
        fontFamily="logo"
        as="h1"
        fontSize="4xl"
        fontWeight="bold"
        color="red.500" 
      >
        My Recipes
      </Heading>
    </Center>
</>
  );
}