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

问题描述

我是第一次使用 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" ...

这只是乱七八糟而且打字很长。

非常感谢任何帮助！

解决方法

聚会有点晚了，但问题是您正在尝试在非查克拉 div 元素上使用查克拉样式道具。

要么改为：

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

或：

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