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

【问题标题】：How to change hover color in mantine.ui menu?如何更改 mantine.ui 菜单中的悬停颜色？
【发布时间】：2022-11-24 15:28:07
【问题描述】：

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

【问题讨论】：

也添加代码，以便轻松检测我们错在哪里
不检查代码，就不可能给你解决方案。添加代码 sn-p。

标签： css reactjs mantine

【解决方案1】：

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

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

我不明白你在说哪个菜单，但我正在举一个按钮组件的例子。您可以覆盖主题中所有按钮的样式。

【讨论】：