我如何追踪 React Emotion 风格的组件回到它们在源代码中的位置

Question

我有一个使用 create-react-app 和 @emotion/styled 组件的 React 应用程序。

当我在浏览器中查看我的代码时，我希望能够看到生成元素的代码来自何处。例如，如果我可以看到包含文件名的样式组件的 className，这将是一个有用的线索。类似于：

<label class="css-plgvp9-Field.component.js">The code is probably in Field.component.js.</label>

为了比较，我目前得到的是：

<label class="css-plgvp9">Where am I?</label>

有没有办法修改应用程序配置来做到这一点？
有没有我没想到的更好的方法？
有没有办法做到这一点？

Field.component.js的内容：

import styled from '@emotion/styled';

// ...

const Label = styled.label`
  /* ... */
`;

可能应该注意我也在使用 @mui/material。

Answer 1

如果要修改emotion生成类名的方式，需要使用emotion提供的babel插件，参考文档：https://emotion.sh/docs/@emotion/babel-plugin.

如果您正在寻找一种无需弹出即可覆盖 CRA 的 babel 配置的方法，可以通过结合使用这两个 npm 包来实现：

customize-cra 和 react-app-rewired.

有关示例用法，请参阅本文：https://devinschulz.com/modify-create-react-apps-babel-configuration-without-ejecting/

我相信您生成的 config-overrides.js 文件将如下所示：

const { override, addBabelPlugin } = require('customize-cra');

module.exports = override(
  addBabelPlugin(
    [
      '@emotion',
      {
        sourceMap: true,
        autoLabel: 'dev-only',
        labelFormat: '[local]',
        cssPropOptimization: true,
      },
    ],
  ),
);

我如何追踪 React Emotion 风格的组件回到它们在源代码中的位置

How do I trace React Emotion Styled Components back to their location in the source code

emotion

reactjs