CODEWITHSUNDEEP
javascriptcssreactjschakra-ui
gskll
gskll

Reputation: 5

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

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.

Upvotes: 0

Views: 2922

Answers (1)

Stepan
Stepan

Reputation: 100

A bit late to the party, but the problem is that you are trying to use Chakra style prop on non-chakra div element.

Either change it to:

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

or:

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

Upvotes: 1

Related Questions