自动化 Material UI 组件，以便于调试和测试答案

【问题标题】：Autolabling Materal UI components for easier debugging and testing自动化 Material UI 组件，以便于调试和测试
【发布时间】：2022-07-06 19:35:50
【问题描述】：

为了方便测试和调试，我们希望像 MUI 标记自己的内部组件一样标记自定义样式的组件。

目前所有自定义样式的组件都获得以下格式的类：class="css-vxvgcl"，因为所有 MUI 组件都获得类名，如：MuiBadge-root css-comk89

情感风格的组件可以通过在插件部分下的 babelrc 文件中添加以下部分来处理这个问题：

    [
          "@emotion",
          {
            "sourceMap": true,
            "autoLabel": "always",
            "labelFormat": "[local]",
            "cssPropOptimization": true
          }
    ],

但是这导致我们需要从情感而不是从 MUI 中导入样式。

// import { styled } from '@mui/material/styles'; Can't be used if babel-setup should kick in
import styled from '@emotion/styled';

这感觉像是与 MUI 风格的解决方案脱节的风险。是否有任何可能的解决方案可以在 babelrc 文件中处理此问题，而不必在我们的组件中使用情感/样式？

【问题讨论】：

标签： reactjs debugging material-ui babeljs emotion-js

【解决方案1】：

尝试更新你的 babel 配置作为这个答案，你也许可以从 @mui 导入

MUI v5 - Add component name to `styled` class names?

【讨论】：