Reflexjs
DocumentationBlocks LibraryGitHubTwitter
v1.0.1

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

© 2021 Reflexjs

DocumentationBlocks LibraryGitHubTwitter