PseudoBox

This component is inspired by Tailwind CSS Pseudo-Class variants and Glamorous Pseudo.

PseudoBox composes Box component and provides props to style common CSS pseudo selectors.

Styling elements on hover, focus, and more can be accomplished by prefixing _ with the appropriate pseudo selector.

For example, to style &:hover, use the _hover prop and pass the style props. We use the underscore _ notation to visually separate pseudo style props from regular style props.

Usage

PseudoBox includes first-class support for styling elements on hover, focus, active, disabled, visited, first-child, last-child, odd-child, even-child, focus-within, and more.

It was created to help reduce the need to pass css prop or use styled(...) function to style common pseudo states.

---

Hover

Add the _hover prop to only apply style props on hover.

Focus

Add the _focus prop to only apply a styles on focus.

Active

Add the _active prop to only apply a styles on active.

Disabled

Add the _disabled prop to style an element when it is disabled. This style will apply when the disabled or aria-disabled attribute of an element is set to true

Visited

Add the _visited props to style a link that has been visited.

First Child

Add the _first prefix to style an element when it is the first-child of its parent. This is mostly useful when elements are being generated in some kind of loop.

Last Child

Add the _last prefix to style an element when it is the last-child of its parent. This is mostly useful when elements are being generated in some kind of loop.

Odd Child

Add the _odd prop to style an element when it is the odd-child of its parent. This is mostly useful when elements are being generated in some kind of loop.

Even Child

Add the _even prop to style an element when it is the even-child of its parent. This is mostly useful when elements are being generated in some kind of loop.

Group Hover

If you need to style a child element when hovering over a specific parent element, add the role="group" attribute to the parent element, then you can use _groupHover prop to style the child element.

Selectors and Props

PseudoBox can be used to style any interactive component. You can apply styles to the following selectors. The selectors are also ARIA-friendly to help you naturally use aria attributes for better accessibility.

All PseudoBox props can use the style props. Learn more about Style props