如何从 AntDesign 更改 FloatButton 的样式？

Question

我正在尝试使用一些自定义 CSS 自定义我的 FloatButton 组件，但不知道如何对背景颜色和其中显示的图标进行操作。我用这段代码进行了测试，但它似乎只适用于悬停时的背景，而不适用于不悬停时的背景。此外，图标的颜色似乎没有改变：
不悬停时：

悬停时：

代码是：

style={{
        backgroundColor: "blue",
        color: "white",
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.backgroundColor = "green";
        e.currentTarget.style.color = "black";
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.backgroundColor = "blue";
        e.currentTarget.style.color = "white";
      }}

有任何想法吗？
笔记： 我添加了一些属性来尝试弄清楚发生了什么，我看到了奇怪的东西：

icon={<FileTextOutlined />}
badge={{ count: 12 }}
description="Very very very big text"

它看起来像这样：

Answer 1

FloatButton

的默认类型是

default

，它会自动添加白色背景颜色和黑色。

为了设置自定义颜色，您只需将

type="text"

添加到您的

FloatButton

，如下所示：

<FloatButton
    type="text"
    style={{
      backgroundColor: 'blue',
      color: 'white',
    }}
    onMouseEnter={(e) => {
      e.currentTarget.style.backgroundColor = 'green';
      e.currentTarget.style.color = 'black';
    }}
    onMouseLeave={(e) => {
      e.currentTarget.style.backgroundColor = 'blue';
      e.currentTarget.style.color = 'white';
    }}
/>

您可以查看 this StackBlitz，获取示例代码的实时工作示例。