How to style hovered state of Menu.Item from StylesAPI

[lament oxide]

Trying to style menu item from menu component. And I`m stuck with hovered state. Found [data-hovered] attribute, but I cant. And also I want to style this in one place - theme.ts with Styles API

Menu: Menu.extend({
  styles: {
    item: {
      "&[data-hovered]": { background: "transparent" },
    },
  },
}),

Plz help )

[sinful saffron]

Use classNames instead of styles

[lament oxide]

Little bit stuck, can you provide simple example of how to? Thanks

[sinful saffron]

https://mantine.dev/styles/styles-api/#classnames-in-themecomponents

[lament oxide]

It works, thank you. So idea of styling the whole app via styles api is like theme.ts and some css files in theme folder?

[sinful saffron]

You can apply styles to Mantine components any way you like, Mantine does not have any limitations related to that