Passing as prop while using styled notation creates hydration errors in NextJS dev mode

[burningyouth]

🐛 Bug Report

This is a very tricky one. When as is passed to a component that uses basic styled-components notation in the NextJS app, it causes hydration errors in dev mode. Somehow it doesn't trigger on the first load in the reproduction, but after changing the code it sticks until the server is restarted. In the actual app it triggers every time, even without changes. I may have messed up the setup somewhere because it looks very strange.

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  compiler: {
    styledComponents: true,
  },
};

module.exports = nextConfig;

Styles:

const ButtonStyled = styled.buttonBox`
  border-radius: md;
  font-weight: semibold;
  transition: default;
  background-color: emerald-500;
  color: #fff;

  @media (min-width: md) {
    font-size: lg;
  }
`;

Using as:

<Button as="a" href="http://google.com">123</Button>

Result:

To Reproduce

Using the standard setup guide for styled-components in NextJS, create *any*Box component, pass any as and trigger fast-refresh with typing anything to the code, then look at the console.

Expected behavior

Using styled notation doesn't create errors.

Link to repo

https://github.com/burningyouth/sc-nextjs-repr

## System:
 - OS: macOS 13.3
 - CPU: (8) arm64 Apple M1 Pro
 - Memory: 420.38 MB / 16.00 GB
 - Shell: 5.9 - /bin/zsh
## Binaries:
 - Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
 - Yarn: 1.22.15 - /usr/local/bin/yarn
 - npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
 - pnpm: 6.11.0 - /usr/local/bin/pnpm

[danilovIT]

Yes, I have the same problem