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

【问题标题】：CHAKRA-UI: how to display several prop style values with one prop?CHAKRA-UI：如何用一个道具显示多个道具样式值？
【发布时间】：2021-01-06 15:51:52
【问题描述】：

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

这只是乱七八糟的打字。

非常感谢任何帮助！

【问题讨论】：

标签： javascript css reactjs chakra chakra-ui

【解决方案1】：

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

要么改成：

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

或：

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

【讨论】：