如何在检查器中查看Styled Components类名？（不降级版本）

• 使用vite-plugin-styled-components专属插件
  这是适配Vite的官方推荐方案，能自动处理Styled Components的调试标识，步骤如下：

  1. 安装插件：

     npm install vite-plugin-styled-components --save-dev
     # 或 yarn add vite-plugin-styled-components -D
     

  2. 修改vite.config.js/ts配置：

     import { defineConfig } from 'vite'
     import react from '@vitejs/plugin-react'
     import styledComponents from 'vite-plugin-styled-components'
     
     export default defineConfig({
       plugins: [
         react(),
         styledComponents({
           displayName: true, // 强制开启真实组件名显示
           fileName: false // 可选，关闭文件名后缀，让调试面板更简洁
         })
       ]
     })
     

• 规范组件定义写法
  避免匿名组件导致的标识丢失：

  • 对于Styled组件本身，保持命名变量写法即可：

    const SubmitButton = styled.button`
      padding: 8px 16px;
      background: #2563eb;
    `
    

  • 对于包裹Styled组件的自定义函数组件，使用命名函数或手动指定displayName：

    // 方式1：命名函数
    function UserAvatar() {
      return <AvatarWrapper src="/avatar.png" />
    }
    
    // 方式2：手动指定displayName
    const UserAvatar = () => <AvatarWrapper src="/avatar.png" />
    UserAvatar.displayName = 'UserAvatar'
    

• 确认开发环境配置

  • 保证Vite运行在development模式下，生产环境代码压缩会自动移除displayName，无需额外配置
  • 检查是否有其他代码压缩插件（如terser）在开发环境启用，若有则关闭相关压缩规则

内容的提问来源于stack exchange，提问作者Matilda Brunemalm