Mantine (v7) 按钮的悬停颜色覆盖不起作用

Question

我有一个使用 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 的类似示例，它们工作得很好。

我预计会显示一个蓝色按钮，并带有文本“测试按钮”，当鼠标悬停在上面时，该按钮会变成红色。

Answer 1

尝试 sx 道具情感。

`    <Button
        size="md"
        sx={(theme) => ({
          backgroundColor: 'blue',
          '&:hover': {
            backgroundColor: 'red',
          },
        })}
      >
        TEST BUTTON
      </Button>`

https://mantine.dev/styles/emotion/