javascript - CHAKRA-UI：如何用一个道具显示多个道具样式值？

Question

我是第一次使用 Chakra UI，但找不到解决方案来解决应该做的简单事情。

在 Chakra 的样式道具文档中，他们为边框样式提供了以下内容（https://chakra-ui.com/docs/features/style-props#borders）

Prop            CSS Property    Theme Field
border          border          borders
borderWidth     border-width    borderWidths
borderStyle     border-style    borderStyles
borderColor     border-color    colors
borderTop       border-top      borders

etc....

有没有办法使用速记来添加border道具来设置宽度、样式、颜色等？

我看不到有关如何执行此操作的任何文档或答案，以及明显的（对我而言）解决方案：

<div border="1px solid black" />

不起作用，所以我不得不使用：

<div borderWidth="1px" borderStyle="solid" borderColor="black" ...

这只是凌乱而冗长的打字。

非常感谢任何帮助！

Answer 1

派对有点晚了，但问题是你正试图在非脉轮 div 元素上使用脉轮风格的道具。

将其更改为：

<Box border='1px solid black'></Box>

或者：

<div style='border: 1px solid black'></div>