reactjs - 不能在extendTheme（ChakraUI）中使用默认颜色

Question

我正在尝试这样做：

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>
  );
}

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

Answer 1

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

应用程序.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>
</>
  );
}