小编Jou*_*ill的帖子

我正在尝试将渐变设置为 Chakra UI 的 Progress 组件，但它不支持背景图像更改。知道我如何才能实现这一目标或者甚至可能吗？

我使用 ChakraUI 创建了一个表格，但我想在行之间放置一个空格以提供良好的间距，我已经尝试使用边距和填充，但至少在我尝试时我不能。

<TableContainer mx="9.8rem">
    <Table variant="unstyled" maxWidth="100%">
        <Thead>
            <Tr>
                <Th color={theme.text.mono} pl="5">
                    Asset
                </Th>
                <Th color={theme.text.mono}>Price</Th>
                <Th color={theme.text.mono}>Balance</Th>
                <Th color={theme.text.mono}>Value</Th>
            </Tr>
        </Thead>
        <Tbody bgColor={theme.bg.blueNavy}>
            <Tr>
                <Td
                    borderLeftRadius="0.75rem"
                    fontSize="sm"
                    fontWeight="bold"
                    pl="4"
                >
                    <Flex flexDirection="row" alignItems="center" gap="2">
                        <Image src="icons/syscoin-logo.png" w="8" h="8" alt="Asset" />
                        <Text>SYS</Text>
                    </Flex>
                </Td>
                <Td fontSize="sm">$1,043.27</Td>
                <Td fontSize="sm">0.0000554448</Td>
                <Td fontSize="sm" borderRightRadius="0.75rem">
                    $0.06
                </Td>
            </Tr>

        ...

我有一个 Angular 应用程序，它应该能够根据用户创建新路线。比方说，用户johndoe的“寄存器，然后应用程序应该创建一个路线：domain/johndoe。

当然，/johndoe路线应该提供一些关于特定用户的信息（如姓名、图像等）。

我使用 Google Cloud Hosting 和 Firestore 作为后端解决方案，到目前为止我的进展是将 注入Router到我的AppComponent构造函数中，然后unshift在router.config. 那种工作，但我必须将所有新路由（'用户'）存储到我的数据库中的一个单独的文件中，然后每次有人导航到一个私有的死记硬背（例如domain/johndoe）时查询数据库。

是否有一个美观且易于维护的解决方案，它考虑了我的后端配置？

我使用下面的方法在 http get 请求中传递多个参数，但它给了我一个错误 -

import { HttpParams, HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) { }

let params = new HttpParams();
params = params.append('var1', val1);
params = params.append('var2', val2);

this.http.get(StaticSettings.BASE_URL, {params: params}).subscribe(...);

错误- 无法重新声明块作用域变量“params”

如果我更改名称，那么如何在 URL 中调用它？

作为一种解决方法，我考虑直接在 URL 中附加参数，如下所示 -

this.params1 = 'parameter1';
this.params2 = 'parameter2';
this.params3 = 'parameter3';

http 请求 -

return this.http.get('URL/json?'+'&parameter1='+this.params1+'&parameter2='+this.params2+'&parameter3='+this.params3)

我收到这个错误 -

Access to XMLHttpRequest at 'URL/json?'+'&parameter1='+this.params1+'&parameter2='+this.params2+'&parameter3='+this.params3' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the …

我为标签指定了三种不同的颜色，但颜色点始终显示为蓝色、绿色和黄色。我很确定我做错了什么。

我写的代码是：

var pieSimpleChart = {
  chart: {
    height: 350,
    type: 'pie',
  },
  legend: {
    position: 'bottom'
  },
  labels: ["IT", "Product Development", "Sales"],
  series: [2, 2, 6],
  fill: {
    colors: ["#447b40", "#cc7870", "#e74ce4"]
  }
}

var chart = new ApexCharts(document.querySelector("#task-pie-chart"), pieSimpleChart);
chart.render();

如何将标签与我选择的颜色相匹配？

我正在尝试学习react/typescript，并且正在按照教程线进行操作，但在尝试安装@chakra-ui/react 或@chakra-ui/core 时不知何故出现此错误。这似乎是反应已更新的依赖问题。我应该回滚反应吗？

kyoudai.industries git:(master) \xe2\x9c\x97 npm install @chakra-ui/react framer-motion\nnpm ERR! code ERESOLVE\nnpm ERR! ERESOLVE unable to resolve dependency tree\nnpm ERR! \nnpm ERR! While resolving: kyoudai.industries@1.0.0\nnpm ERR! Found: react@17.0.1\nnpm ERR! node_modules/react\nnpm ERR!   react@"^17.0.1" from the root project\nnpm ERR!   peer react@"16.x || 17.x" from @chakra-ui/react@1.0.1\nnpm ERR!   node_modules/@chakra-ui/react\nnpm ERR!     @chakra-ui/react@"*" from the root project\nnpm ERR!   2 more (@emotion/react, @emotion/styled)\nnpm ERR! \nnpm ERR! Could not resolve dependency:\nnpm ERR! peer react@"^16.8" from framer-motion@2.9.4\nnpm ERR! node_modules/framer-motion\nnpm ERR!   framer-motion@"*" from the root project\nnpm ERR!   peer …

和标题差不多。已在文档中搜索有关如何执行此操作的说明，但没有运气。

我的设置使用 NextJS，resetCSS 是通过 ChakraProvider 传递的，所以我无法更改样式来修改字体大小，因为 Chakra 会覆盖它。

我正在尝试创建多个包含信息的框，每个框都有一个图标。现在我已经硬编码如下：

<Box p={10} borderRadius='lg' bg={colorMode === 'light' ? 'gray.300' : 'gray.700'}>
    <Stack spacing={5}>
        <Box mt={5}>
            <IconContext.Provider value={{size: '10vh'}}>
                <div>
                    <IoLogoJavascript/>
                </div>
            </IconContext.Provider>
        </Box>
        <Box><Heading>JS & TS</Heading></Box>
    <Progress size="lg" value={75} hasStripe isAnimated/>
</Stack>
</Box>

现在，为了可以动态添加更多这些组件，我想实现一个数据库。大多数情况下很容易，我只是不知道如何使用react-icons组件来实现它？我应该使用其他东西还是可以？

我试图将图标正确放置在输入的中间，该输入具有size="xs". 然而，我的所有尝试都失败了，并且图标始终位置太低/太低。我也尝试过使用IconButton而不是常规图标，但这也不起作用。

import { Input, InputGroup, InputLeftElement } from "@chakra-ui/react"
import { SearchIcon } from "@chakra-ui/icons"

// ...

    <InputGroup>
      <InputLeftElement
        pointerEvents="none"
        children={<SearchIcon color="gray.300"/>}
        size="xs"
        />
      <Input
        variant="outline"
        size="xs"
        placeholder={``}
      />
    </InputGroup>

我究竟做错了什么？

这是代码和框。请注意，在这个codesandbox中，图标实际上位于Input中间的上方（这仍然是错误的），而不是像我的本地计算机上那样位于下方。

https://codesandbox.io/s/optimistic-bartik-5ifsd?file=/src/App.tsx

我的更新功能有问题。我的游戏中有一个名为HydraBehaviour“九头蛇敌人”的课程。并且HydraBehaviour继承自 which EnemyBehaviourClass，它是一个具有 update 方法的类ChasePlay();和StopChasingPlayer();。

在我的九头蛇类中，我想创建攻击系统，因为并非所有敌人都会具有相同的攻击风格。所以我的问题是我无法在 Hydra 类中使用 update 方法，因为它已经在EnemyBehaviourClass. 所以我被迫使用固定更新，但这不是正确的方法。