Clear cache on view transition

[nojaf]

Hello,

I'm looking for the alternative code in styled-components for

import styled from '@emotion/styled';
import { withEmotionCache } from '@emotion/react';
import { useEffect } from 'react';

const StyledButton = styled.button`
  display: block;
  padding: 4em;
  background-color: red;
  color: white;
`;

const Button = withEmotionCache((props, cache) => {
  useEffect(() => {
    document.addEventListener('astro:before-swap', () => {
      cache.inserted = {};
      cache.registered = {};
      cache.sheet.flush();
    });
  }, []);

  return <StyledButton>My styled button</StyledButton>;
});

export default Button;

When the 'astro:before-swap' event happens my style needs to be triggered.
Is there a way to do this in styled components?

(More context in withastro/astro#11000)