如何更改 mantine.ui 菜单中的悬停颜色？

Question

我尝试在悬停时更改菜单颜色。但是，不工作。如何更改 mantine.ui 菜单中的悬停颜色？

Answer 1

如果您熟悉主题的概念，您可以很容易地掌握它。

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

我不明白你在说什么菜单，但我给出了按钮组件的示例。您可以覆盖主题中所有按钮的样式。

Answer 2

我正在使用

@emotion/styled

中的样式组件。

我的示例将展示如何在将鼠标悬停在 Button 组件上时更改背景颜色和颜色。

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>
}

我认为菜单将以同样的方式工作，您可以按照以下来源探索更多信息：Styled Componenets

Answer 3

我知道这个问题已经解决，但 Ashish 的解决方案对我使用 mantine v7.13.3 不起作用。我知道