The simplest way of adding
:hover styles to an element is to use the
Then import the styles into your component:
If you have postcss-preset-mantine in your
project, you can use
@mixin hover to add hover styles. Unlike
@mixin hover will also add styles for touch devices.
The code above will be transformed into:
Mantine does not provide a way to add hover styles inline in jsx as a library feature. However, in your project you can use any third-party styling library that supports inline styles, for example styled-components or emotion.