无法为Material UI组件Accordion、AccordionSummary添加name属性如何解决？

你直接在组件上写name属性不生效，是因为MUI组件默认仅接收文档中明确定义的组件props，未被定义的原生HTML属性会被自动过滤，不会挂载到最终渲染的DOM元素上。可以用以下几种方法实现需求：

方法1：通过slotProps传递属性（适用于MUI v5及以上版本） #

通过组件的slotProps配置项给根DOM插槽传递自定义属性，不会被props过滤：

<AccordionSummary
  expandIcon={<ExpandMore className={classes.iconColor} />}
  aria-controls="sensors"
  id="sensors"
  slotProps={{
    root: {
      name: "sensors-accordion-summary" // 替换为你需要的name值
    }
  }}
>
  <Typography>Sensors</Typography>
</AccordionSummary>

方法2：使用测试专属的data-testid属性（更推荐用于Cypress测试场景） #

Cypress官方更推荐使用data-*前缀的专属测试属性定位元素，不会和业务属性冲突，且MUI默认不会过滤这类属性，可以直接在组件上添加：

<AccordionSummary
  expandIcon={<ExpandMore className={classes.iconColor} />}
  aria-controls="sensors"
  id="sensors"
  data-testid="sensors-accordion-summary"
>
  <Typography>Sensors</Typography>
</AccordionSummary>

对应的Cypress定位代码为：

cy.get('[data-testid="sensors-accordion-summary"]')

该方式稳定性更高，不会因为业务逻辑调整修改name属性导致测试用例失效。 #

方法3：自定义根元素标签（适用于MUI全版本） #

指定组件根元素为支持name属性的原生HTML标签，此时直接传入的name属性会被原生标签接收：

<AccordionSummary
  expandIcon={<ExpandMore className={classes.iconColor} />}
  aria-controls="sensors"
  id="sensors"
  component="div"
  name="sensors-accordion-summary"
>
  <Typography>Sensors</Typography>
</AccordionSummary>

内容的提问来源于stack exchange，提问作者Akshay phalphale