个人中心
gpt4 book ai didi

What is the type for color in Chakra UI when creating an interface(创建界面时，Chakra UI中的颜色类型是什么)

转载 作者：bug小助手 更新时间：2023-10-26 21:08:25 26 4
gpt4 key购买 nike



I'm not sure what to enter for color or background. Property.color doesn't exist. There must be something that represents all these color options that can be normally seen. I've entered any right now to prevent error but that doesn't give me type hinting for colors.

我不确定要输入什么颜色或背景。Property.Color不存在。必须有一些东西来代表所有这些通常可以看到的颜色选项。我现在已经输入了任何内容，以防止出错，但这不会给我输入颜色提示。


import {
  BackgroundProps,
  Card,
  CardBody,
  ColorProps,
  Colors,
  HStack,
  Icon,
  ResponsiveValue,
  Text,
} from "@chakra-ui/react";
import { HiFolder } from "react-icons/hi";
import { MdKeyboardArrowRight } from "react-icons/md";
import { ReactNode } from "react";

interface Props {
  children: ReactNode;
  color: ResponsiveValue<any>;
  //   backgroundColor: BackgroundProps;
}

function DashboardLinkSectionCard({ children, color }: Props) {
  return (
    <>
      <Card
        // maxW={"ms"}
        maxH={"20"}
        color={color}
        // backgroundColor={backgroundColor}
      >
        <CardBody>
          <HStack gap={2}>
            <Icon as={HiFolder} boxSize={6} />
            <Text>{children}</Text>
            <Icon as={MdKeyboardArrowRight} boxSize={6} />
          </HStack>
        </CardBody>
      </Card>
    </>
  );
}

export default DashboardLinkSectionCard;


This is the suggestions I would normally get.

这是我通常会得到的建议。


enter image description here


One possible solution is, I copy all the colors and make a custom type like this. Surely there must be a better way.
enter image description here

一种可能的解决方案是，我复制所有的颜色，并像这样定制一个类型。当然，一定有更好的办法。


更多回答
优秀答案推荐

It is possible to use the ChakraProps interface to achieve what you want. It contains a color attribute that enumerates all the values allowed by Chakra. This is also applicable to the backgroundColor prop:

可以使用ChakraProps接口来实现您想要的功能。它包含一个颜色属性，该属性枚举了Chakra允许的所有值。这也适用于背景颜色道具：


import { ChakraProps } from '@chakra-ui/react';

interface Props {
  children: ReactNode;
  color: ChakraProps['color'];
  backgroundColor: ChakraProps['backgroundColor'];
}

Actually, the ChakraProps interface extends SystemProps which itself extends ColorProps and BackgroundProps (that you already imported). So you could do this as an alternative option:

实际上，ChakraProps接口扩展了SystemProps，后者本身扩展了ColorProps和BackEarth Props(您已经导入了)。因此，您可以将此作为另一种选择：


import { BackgroundProps, ColorProps } from '@chakra-ui/react';

interface Props {
  children: ReactNode;
  color: ColorProps['color'];
  backgroundColor: BackgroundProps['backgroundColor'];
}

更多回答

26 4 0
文章推荐： Simple Program that Implements a Multi-thread Example from a Tutorial Runs Slower than Single Threaded Implementation(实现教程中的多线程示例的简单程序运行速度比单线程实现慢)
文章推荐： Trouble Installing GCC on Debian Linux Distribution in Dockerfile(在文档文件中的Debian Linux发行版上安装GCC时出现问题)
文章推荐： java.sql.SQLNonTransientConnectionException: Cannot open file:keystore.jks [Keystore was tampered with, or password was incorrect](异常：无法打开文件：keystore.jks[密钥库被篡改，或密码不正确])
文章推荐： Android Studio open tabs not showing(Android Studio打开的选项卡未显示)
bug小助手
个人简介

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

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