我尝试在悬停时更改菜单颜色。但是,不工作。如何更改 mantine.ui 菜单中的悬停颜色?
如果您熟悉主题的概念,您可以很容易地掌握它。
<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>
我不明白你在说什么菜单,但我给出了按钮组件的示例。您可以覆盖主题中所有按钮的样式。
我正在使用
@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
我知道这个问题已经解决,但 Ashish 的解决方案对我使用 mantine v7.13.3 不起作用。我知道