自动标记 Material UI 组件以方便调试和测试

发布于 2025-01-09 23:42:42 字数 736 浏览 1 评论 0原文

为了方便测试和调试，我们希望为自定义样式的组件添加标签，就像 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 文件中处理这个问题，而不必在我们的组件中使用情感/样式？

原文

In order to the facilitate testing and debugging we'd like to label our custom styled components just like the MUI labels their own internal components.

Currently all all custom styled components gets a class on the following format: class="css-vxvgcl" were as all MUI components gets classNames like: MuiBadge-root css-comk89

Emotion styled components can handle this by adding the following section to the babelrc file under the plugins section:

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

However this leads to that we need to import styled from emotion rather than from MUI.

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

This feels like a risky disconnect from the MUI styled solution. Is there any possible solution to handle this in the babelrc file without having to use emotion/styled in our components?

分享到QQ

分享到微博