我有一个使用 React 和 Mantine 的简单按钮来测试我遇到的问题 (v7.13.3)
import React from "react";
import ReactDOM from "react-dom/client";
import { MantineProvider, Button } from "@mantine/core";
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<MantineProvider>
<React.StrictMode>
<Button
size="md"
styles={{
root: {
backgroundColor: 'blue',
'&:hover': {
backgroundColor: 'red',
},
},
}}
>
TEST BUTTON
</Button>
</React.StrictMode>
</MantineProvider>
);
但是悬停按钮实际上并没有按预期改变颜色。不过,当实际上没有覆盖它时,悬停确实会改变颜色。我见过使用早期版本的 Mantine 的类似示例,它们工作得很好。
我预计会显示一个蓝色按钮,并带有文本“测试按钮”,当鼠标悬停在上面时,该按钮会变成红色。
尝试 sx 道具情感。
` <Button
size="md"
sx={(theme) => ({
backgroundColor: 'blue',
'&:hover': {
backgroundColor: 'red',
},
})}
>
TEST BUTTON
</Button>`