How to change hover color in mantine.ui menu?

Question

I tried to change menu color when hover. But, not working. How to change hover color in mantine.ui menu?

Answer 1

If you are familiar with the concept of Theming, you can get it pretty easily.

<MantineProvider theme={{
      components: {
        Button: {
          // Subscribe to theme and component params
          styles: (theme, params) => ({
            root: {
              backgroundColor:
                params.variant === 'filled'
                  ? theme.colors[params.color || theme.primaryColor][9]
                  : undefined,
              '&:hover': { backgroundColor: params.variant === 'filled'
                  ?'#ddd':'transparent'
                }
            },
          }),
        },
      },
    }}>
    <Button> I have #ddd color on hover. </Button>
</ManitineProvider>

I don't understand which menu you're talking about, but I am giving an example for the button component. You can override style for all buttons from the theme.

Answer 2

I'm using styled component from @emotion/styled.

My example will show how to change bgcolor and color when hover on Button component.

import styled from "@emotion/styled";
import {Button as MantineButton} from "@mantine/core"

const Button = styled(MantineButton)`
&:hover {
  color: red;
  background-color: blue;
}`

export default function CustomizedButton() {
  return <Button>Hover me!</Button>
}

I think Menu will work in this same way, you can explore more information following this source: Styled Componenets