在 MUI v5 中，如何在开发工具 DOM 中调试/查找特定元素/样式/类？

Question

在 MUI v4 中，检查 DOM 并隔离该文件中的确切组件文件和样式块非常容易：

但是，在 MUI v5 中，这是不可能的，这使得调试和查找隐藏在代码中的样式元素变得更加困难（我的屏幕截图很简单，但想象一下有一个包含数百个组件的大型应用程序）：

是否有更好的调试 MUI v5 以允许更快地查找/隔离代码中的特定组件/样式块？

此外，以下是我发现的在 MUI v5 中进行（和不进行）样式设置的各种方法，但是，在检查 DOM 时，它们都没有显示出良好的调试信息（请参阅 github 源代码以了解

classes

、

styles

和

sty

）：

      {/* OK - these work */}
      <Box sx={{ ...classes.text }}>HELLO</Box>
      <Box style={classes.text}>HELLO</Box>
      <Box css={styles.text}>HELLO</Box>
      <Box sx={sty.text}>HELLO</Box>

      {/* FAIL - these do not work - the v4 way, for completeness */}
      <Box classes={{ root: classes.text }}>HELLO</Box>
      <Box className={classes.text}>HELLO</Box>
      <Box class={classes.text}>HELLO</Box>

来源：https://github.com/masaok/react-css-google-demo/blob/master/src/archive/GoogleTest.jsx#L72-L81

Answer 1

您可以向样式添加标签属性，它将显示在检查器中。 例如：

main: { color: 'blue', fontWeight: 'bold', label: 'someLabel' }

这将显示在检查器中，就像 css-sha 之后一样：

例如：

<div class="MuiBox-root css-h8tuqk-someLabel">...</div>