javascript - CHAKRA-UI: how to display several prop style values with one prop?

Question

I'm using Chakra UI for the first time, and can't find the solution to what should surely be a simple thing to do.

In Chakra's style props documentation, they give the following for border styles (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....

Is there a way of using shorthand to just add the border prop to set width, style, color etc?

I can't see any documentation or answers on how to do this, and the obvious (to me) solution of:

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

doesn't work, so I'm having to use:

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

which is just messy and long to type.

Any help much appreciated!

question from:https://stackoverflow.com/questions/65598974/chakra-ui-how-to-display-several-prop-style-values-with-one-prop

Answer 1

Waitting for answers