PseudoBox

Renders a <Box /> component with additional props for CSS pseudo selectors.

Highly influenced by the excellent <PseudoBox /> from Chakra UI.


<PseudoBox
  as={Input}
  placeholder="Focus me"
  py={2}
  px={4}
  bg="gray.200"
  color="gray.900"
  borderColor="transparent"
  borderWidth="2px"
  rounded="md"
  outline="none"
  _focus={{ backgroundColor: '#fff', borderColor: 'purple' }}
/>
<PseudoBox
  as={Input}
  placeholder="Focus me"
  py={2}
  px={4}
  bg="gray.200"
  color="gray.900"
  borderColor="transparent"
  borderWidth="2px"
  rounded="md"
  outline="none"
  _focus={{ backgroundColor: '#fff', borderColor: 'purple' }}
/>

Props

These are props related to the Pseudo Box component.

Prop	Selector
`_after`	`&:after`
`_before`	`&:before`
`_hover`	`&:hover`
`_focus`	`&:focus`
`_active`	`&:active`, `&[data-active=true]`
`_visited`	`&:visited`
`_pressed`	`&:pressed`
`_checked`	`&[aria-checked=true]`
`_mixed`	`&[aria-checked=mixed]`
`_selected`	`&[aria-selected=true]`
`_disabled`	`&:disabled,` `&:disabled:focus`,`&:disabled:hover`, `&[aria-disabled=true]`, `&[aria-disabled=true]:focus`, `&[aria-disabled=true]:hover`
`_invalid`	`&[aria-invalid=true]`
`readOnly`	`&[aria-readonly=true]` `&[readonly]`
`_even`	`&:nth-of-type(even)`
`_odd`	`&:nth-of-type(odd)`
`_first`	`&:first-of-type`
`_last`	`&:last-of-type`
`_expanded`	`&[aria-expanded=true]`
`_grabbed`	`&[aria-grabbed=true]`
`_groupHover`	`[role=group]:hover &`
`_notFirst`	`&:not(:first-of-type)`
`_notLast`	`&:not(:last-of-type)`
`_focusWithin`	`&:focus-within`
`_placeholder`	`&::placeholder`

PseudoBox

Props#

Props