How to support custom babel config for emotion show classname for run dev command

[Caesar-APAX]

Aslo it need support @styled-coponents to show classname for run dev

Reproduction

https://github.com/Ranger-Theme/ranger-storefront-mui-remix

System Info

Mac os

Used Package Manager

pnpm

Expected Behavior

When i run dev command, the emotion shuld show the class name for StyledXXX

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [
    react({
      jsxImportSource: "@emotion/react",
      babel: {
        plugins: ["@emotion/babel-plugin"],
      },
    }),
  ],
});

export default defineConfig({
  plugins: [
    remix({
      jsxImportSource: "@emotion/react",
      babel: {
        plugins: ["@emotion/babel-plugin"],
      },
    }),
  ],
});

Actual Behavior

Not show the real className, just show axjs-xx className

https://dev.to/glocore/configure-emotion-with-your-vite-react-project-7jl