FluentUI Rating Component Color

[MattMNC]

I have this simple Fluent Rating Component inside a conditional rendering

<Rating max={5}
size={RatingSize.Large}
defaultRating={1}
ariaLabel="Large stars"
ariaLabelFormat="{0} of {1} stars"
onChange={(e, value) => this.handleRatingChange(e, value)}
/>
Now the stars looks like this

I just want to change the stars color to gold: full gold when selected and gold border-white filling when unselected.

Looking at github documentation(https://github.com/microsoft/fluentui/wiki/Component-Styling#using-a-styleable-component that is outdate because it shows some deprecated things like the "selectors" object) i tried doing an Object-Based Styling following the interfaces that i found on the fluent-ui rating documentation(https://developer.microsoft.com/en-us/fluentui#/controls/web/rating#IRatingStyles),

i literally want all gold so i put gold in every single object like this:

private styles : IStyleFunctionOrObject<IRatingStyleProps, IRatingStyles> = {
labelText: {color: '#d4af37', hover: {color: '#d4af37'}},
ratingButton: {color: '#d4af37', hover: {color: '#d4af37'}},
ratingFocusZone: {color: '#d4af37', hover: {color: '#d4af37'}},
ratingStar: {color: '#d4af37', hover: {color: '#d4af37'}},
ratingStarBack: {color: '#d4af37', hover: {color: '#d4af37'}},
ratingStarFront: {color: '#d4af37', hover: {color: '#d4af37'}},
ratingStarIsLarge: {color: '#d4af37', hover: {color: '#d4af37'}},
ratingStarIsSmall: {color: '#d4af37', hover: {color: '#d4af37'}},
root: {color: '#d4af37', hover: {color: '#d4af37'}},
rootIsLarge: {color: '#d4af37', hover: {color: '#d4af37'}},
rootIsSmall: {color: '#d4af37', hover: {color: '#d4af37'}}
}
After doing this i passed this object to the "styles" prop of the Rating Component like this:

<Rating max={5}
size={RatingSize.Large}
defaultRating={1}
ariaLabel="Large stars"
ariaLabelFormat="{0} of {1} stars"
onChange={(e, value) => this.handleRatingChange(e, value)}
styles={this.styles}
/>
Now the stars have a strange behaviour:

Without hovering the stars looks exactly as i want

With a rating of 3 and while hovering the 2nd star i get this

With a rating of 3 and while hovering the 5th star i get this

Basically it seems like the hover restyling doesn't work.

I'm sure that i'm missing something but i can't find out what.

Thanks in advance.

[micahgodbolt]

Can you create a codepen with your demo so that we can try to fork and update that pen? aka.ms/fluentpen