Display

Atomic Props	CSS Properties
block	display: block;
inline	display: inline;
inline-block	display: inline-block;
flex	display: flex;
inline-flex	display: inline-flex;
grid	display: grid;
hidden	display: 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