CSS Variable implementation guide on Hover State in Styled Components
This might be a silly question, but I keep running into I've tried everything I can think of but I've spent hours debugging this and I'm experiencing an scenario where a CSS variable defined in a `styled-components` setup isn't updating on hover as expected. I've defined a base color using a CSS variable and intended for this variable to change when hovering over a button. However, it seems the hover state is not triggering the change. Here's a simplified version of my code: ```javascript import styled from 'styled-components'; const Button = styled.button` --main-bg: blue; background-color: var(--main-bg); color: white; padding: 10px 20px; border: none; border-radius: 5px; transition: background-color 0.3s; &:hover { --main-bg: green; } `; const App = () => { return <Button>Hover me</Button>; }; export default App; ``` When I hover over the button, I expect the background color to change from blue to green, but it remains blue. I've checked that the `styled-components` version I'm using is 5.3.0, and I've tried restarting the development server to clear any caching issues. I've also verified that other CSS properties work on hover, such as text color and borders, but the CSS variable does not seem to respond. Is there a specific reason why CSS variables defined within a hover state in `styled-components` might not update properly? I would appreciate any insights or suggestions on how to resolve this scenario. I'm using Javascript 3.11 in this project. My team is using Javascript for this microservice. Am I approaching this the right way? The project is a web app built with Javascript.