[nextjs] Cannot style next/link component

[Sephster]

Steps to reproduce

Reproduction repo here: https://github.com/Sephster/styled-components-bug

1. Clone the repo
2. run npm i
3. run npm run dev
4. visit the site url (usually http://localhost:3000)
5. the page doesn't load and errors appear in the console

Current behavior

When creating a styled component from a next/link component e.g

const LinkStyle = styled(Link)`
  font-weight: bold;
`;

The page containing the component cannot render with errors in the terminal. The only workaround I've found for this is to style an a tag and use passHref and legacyBehavior for the next link e.g.

const LinkStyle = styled.a`
  font-weight: bold;
`;

return (
  <Link href={url} passHref legacyBehavior>
    <LinkStyle>Link text</LinkStyle>
  </Link>

Expected behavior

We should be able to create a styled component that uses a next/link component as its base. This is possible in the styled-components package.

Context

To style a next JS link component.

Your environment

System:
OS: Linux 6.5 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
Binaries:
Node: 20.15.1 - ~/.nvm/versions/node/v20.15.1/bin/node
npm: 10.7.0 - ~/.nvm/versions/node/v20.15.1/bin/npm
pnpm: 7.14.0 - ~/.local/share/pnpm/pnpm
Browsers:
Chrome: Not Found
npmPackages:
@emotion/react: 11.13.0
@emotion/styled: 11.13.0
@mui/private-theming: 6.0.0-dev.20240529-082515-213b5e33ab
@mui/styled-engine: 6.0.0-dev.20240529-082515-213b5e33ab
@mui/system: 6.0.0-dev.240424162023-9968b4889d
@mui/types: 7.2.15
@mui/utils: 6.0.0-dev.20240529-082515-213b5e33ab
@types/react: ^18 => 18.3.3
react: ^18 => 18.3.1
react-dom: ^18 => 18.3.1
styled-components: ^6.1.12 => 6.1.12
typescript: ^5 => 5.5.4

Search keywords: next link

[Sephster]

A similar issue occurs with the next/image component. It cannot be styled and results in a build error

[royporter7]

I think I'm getting the same error as the people above, for both the next/link component and the next/image.
Oddly enough these two components work in the example next.js ts project provided in the examples, however when integrated into my project, I get errors.

[DiegoAndai]

Hey @Sephster, thanks for the report. I see you're using Emotion and not Pigment CSS. Did you intend to open this issue on https://github.com/mui/material-ui instead?

[DiegoAndai]

@rhoiyds are you getting the error with Pigment CSS?

[royporter7]

@DiegoAndai Yes I'm working with Pigment CSS, but integrated with MUI. However I've been working through a multitude of issues (bundling issue, transformLibraries issue) so I can't say for certain that I've been able to isolate this specific issue, sorry.

[Sephster]

@DiegoAndai apologies the environment info is inaccurate. I think I installed emotion after testing. I can confirm this is a bug with pigment. I was using it alone. I will update the environment info for you this weekend

[DiegoAndai]

@brijeshb42 may I ask you to take a look into this one when you have some time?

[axeleroy]

Hello,

I have found a way to indirectly style Link using the as prop. What I do is create a component (like Cta) and use it like that:

<Cta as={Link} href="/foo/bar">Click me</Cta>

Just make sure if you are using shouldForwardProp to not forward as

const Cta = styled("button", {
  shouldForwardProp: (propName) => propName !== "as" && propName !== "variant"
})<{ variant: "primary" | "secondary" }>({
  ...
});