如何在检查器中查看样式组件的名称（类名称）？ （寻找不包括降级样式组件版本的答案）

Question

几年前学习样式组件时，我记得总是使用

import styled from "styled-components/macro"

以便在检查时能够看到实际组件的名称（以便更好地调试）。现在我似乎无法再找到任何解决方案了。我看到有人建议降级到 5.3.0 版本（从长远来看这不是一个好的解决方案）。我看到了另一个解决方案将 displayNames 标志打开为 true（使用 Babel 或 SWC） 但无论如何都无法让它工作。

有人有稳定的解决方案吗？我真的很喜欢样式化的组件，所以如果能找到一个解决方案就太好了。预先感谢！

我正在使用Vite。

Answer 1

安装 babel-plugin-styled-components 解决了这个问题，所以：

npm install --save-dev babel-plugin-styled-components

然后更新

vite.config.js

:

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ["styled-components"],
        babelrc: false,
        configFile: false
      }
    })
  ]
})