CSS transitions optimization guide on SVG elements in React 18 with styled-components
Hey everyone, I'm running into an issue that's driving me crazy. I'm upgrading from an older version and I'm working on a personal project and I'm trying to apply a CSS transition to an SVG element that I've styled using `styled-components` in my React 18 app. However, the transition doesn't seem to be working as expected. Here's the relevant part of my code: ```javascript import styled from 'styled-components'; const Circle = styled.svg` transition: fill 0.3s ease; &:hover { fill: blue; } `; const MyComponent = () => { return ( <Circle width="100" height="100"> <circle cx="50" cy="50" r="40" fill="red" /> </Circle> ); }; ``` When I hover over the circle, I expect it to change from red to blue smoothly, but it just changes instantly without any transition effect. I've also tried applying the transition to the `<circle>` element directly, but the result is the same. I verified that the CSS is being applied by inspecting the element, and it looks like the hover styles are correctly set. I'm also ensuring that there’s no conflicting CSS elsewhere in the project. I noticed the following in the console: `Warning: want to update a component (`Circle`) while rendering a different component (`MyComponent`).` What could be causing the scenario here? Is there a way to properly apply transitions to SVG elements in this setup? Any advice or insights would be greatly appreciated. What am I doing wrong? This issue appeared after updating to Javascript LTS. How would you solve this? What are your experiences with this? This is part of a larger CLI tool I'm building. How would you solve this? I'm working in a macOS environment. Thanks for taking the time to read this!