Visibility

Utilities for controlling the visibility of an element.

React propsCSS Properties
visibility={keyword}visibility: {keyword};

Invisible

Use visibility="hidden" to hide an element, but still maintain its place in the DOM, affecting the layout of other elements (compare with display=none from the display documentation).

1
2
3
<x.div display="flex" justifyContent="center" spaceX={4}> <x.div>1</x.div> <x.div visibility="hidden">2</x.div> <x.div>3</x.div> </x.div>

Visible

Use visibility="visible" to make an element visible. This is mostly useful for undoing the visibility="hidden" utility at different screen sizes.

1
2
3
<x.div display="flex" justifyContent="center" spaceX={4}> <x.div>1</x.div> <x.div visibility="visible">2</x.div> <x.div>3</x.div> </x.div>

Responsive

To apply a visibility utility only at a specific breakpoint, use responsive object notation. For example, adding the property visibility={{ md: "hidden" }} to an element would apply the visibility="hidden" utility at medium screen sizes and above.

<x.div visibility={{ md: 'hidden' }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.

Edit this page on GitHub