I am trying to customize my FloatButton component some custom CSS and can’t find out how to do it for the background color and for the Icon that is displayed in it. I tested with this code but it seems to work only for the background when hovering but not when not hovering. Also the color for the Icon seems to not change:

When not hovering:

When hovering:

The code is:

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";
      }}

Any ideas?