Reflexjs
DocumentationBlocks LibraryGuidesGitHub
/
,

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",
}}
/>

Focus

To add focus styles, use the _focus style prop.

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

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
VariantsGlobal styles

© 2022 Reflexjs

DocumentationBlocks LibraryGuidesGitHub