Setting arrow color on hover

[patrivet]

Hi, I wondering if there is a way to set the color of the arrow (inside the the ScrollToTop component) during mouse hover? I can see 'color' can be passed as a property to set the color and I have tried in CSS (via :hover on the class of the ScrollToTop component) but can't get that to work.
Is this something that would be possible via a new property on the component?
thanks a lot.

[HermanNygaard]

Hi! You can do it like this:

JSX:

<ScrollToTop smooth className="scrollButton" />

And in your CSS Stylesheet:

.scrollButton {
  /* Edit this to your liking, this is just the base stylesheet used in this component */
  background-color: white;
  right: 40px;
  bottom: 40px;
  position: fixed;
  z-index: 2;
  cursor: pointer;
  border-radius: 7px;
  width: 40px;
  height: 40px;
  transition: opacity 1s ease-in-out;
  box-shadow: 0 9px 25px 0 rgba(132, 128, 177, 0.28);
  border: none;
  outline: none;
}

.scrollButton:hover svg {
 /* Change color of arrow on hover :) */
  fill: red
}

Let me know if it works for you :)

[patrivet]

Hi,
thanks a lot- this did work 👍🏻
I should include my attempted code next time - as I was targeting the equivalent of:-
.scrollButton:hover { fill: white }
I wasn't using "svg" in the rule though. I now understand- how the component is set up.
cheers