Class "displayName" that styled-components offer, does not get applied if MUI is used

[TurkaljGoran]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I am using Next JS 12.2.2, it has SWC which now supports styled-components.
Material UI is the latest version.
styled-components is the latest version.

EXAMPLE 1: styled is used from styled-components:

import styled from "styled-components";

export const SCHeroTitle = styled("h2")`

color: pink;
background-color: blue;

`;

This will render correct displayName for the class:

Example 2: using styled from MUI

import {styled} from "@mui/material" or import {styled} from "@mui/material/styles" makes no difference.

export const SCHeroTitle = styled("h2")`

color: green;
background-color: grey;

`;

This will render a generic class name:

next.config.js has "compiler" object set with only this options for the purpose of testing if it works:

Same thing happens if I use Babel instead of SWC so thats not the issue, I was wondering is this intended by MUI - does it do something that prevents displayName to actually get applied and produce sensible class names or is this a bug?

Cheers guys!

Expected behavior 🤔

Class names with displayName applied.

Steps to reproduce 🕹

Steps:

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[creestor]

This is not working, because under the hood, mui used emotion.js for making styled components this entails that plugin for styled-components in swc is not compatible with emotion. Also i saw the issue about that here before, cause i have had the same problem.

[mnajdova]

@TurkaljGoran are you using @mui/styled-engine-sc and configured it with an alias? Can you maybe share a simple reproduction repository?

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.