Display

Atomic PropsCSS Properties
blockdisplay: block;
inlinedisplay: inline;
inline-blockdisplay: inline-block;
flexdisplay: flex;
inline-flexdisplay: inline-flex;
griddisplay: grid;
hiddendisplay: none;
display={value}display: {value};

Block#

Use block props to create a block-level element.

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

Inline#

Use inline props to create an inline element.

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

Inline Block#

Use inlineBlock props to create an inline block-level element.

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

Flex#

Use flex props to create a block-level flex container.

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

Inline Flex#

Use inlineFlex props to create an inline flex container.

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

Grid#

Use grid props to create a grid container.

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

Hidden#

Use hidden props to set an element to display: none.

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

Display#

if the preset atomic props can not be satisfied,you can use display props.

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO