CSS Custom Properties implementation guide on Hover State in Chrome 117 with Styled Components
I'm optimizing some code but I've looked through the documentation and I'm still confused about I'm working on a React application using Styled Components, and I’m trying to use CSS custom properties (variables) to change the background color of a button on hover. Despite setting everything up correctly, the hover state isn’t reflecting the change in Chrome 117 but works perfectly in Firefox. Here's what I have: ```javascript const Button = styled.button` --bg-color: blue; background-color: var(--bg-color); color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; &:hover { --bg-color: green; } `; ``` However, when I hover over the button, it remains blue instead of changing to green. I’ve checked if the styled component is correctly applied, and it seems fine. I’ve also tried using `background-color: green;` directly in the hover state, which works, but I want to maintain the dynamic nature of using variables. Additionally, I checked for any console errors, but there’s nothing unusual. I even cleared the cache and restarted the browser, yet the scenario continues. Has anyone else faced this question with CSS custom properties and hover states, particularly in Chrome? Any suggestions on how to make this work would be greatly appreciated. Am I missing something obvious?