Pseudo Selectors

Hover, focus and other pseudo selectors.

Out of the box, Reflexjs provides two props for hover and focus styles.

Hover#

To add hover styles, use the _hover style prop.

<button
  bg="primary"
  _hover={{
    bg: "secondary",
    boxShadow: "xl",
  }}
/>
 
Copy

Focus#

To add focus styles, use the _focus style prop.

<button
  bg="primary"
  _focus={{
    borderColor: "accent",
  }}
/>
 
Copy

Other Pseudo props#

You can the the sx props for other pseudo selectors such as :before, :nth-child or :active.

<button sx={{
  ":before": {
    content: '""',
  }
}}>
</button
 
Copy