在Material-UI中单击TextField时，为什么AccordionSummary背景会变为灰色？

问题描述

我使用的是Material-UI的Accordion，在AccordionSummary内有一个<TextField />（实际上由Formik和formik-material-ui控制），背景为{{1 }}仅在字段内单击时变为灰色。我不希望它执行此操作，并且它似乎不是由Accordion API配置的任何内容，除非丢失了某些内容。如何阻止这种行为？

我已在Codesandbox上重新创建了该问题。

这是沙盒中的完整代码：

AccordionSummary

解决方法

您看到的是AccordionSummary的{​​{3}}。您也可以在focused styling中观察到这一点，方法是单击手风琴，然后使用 Tab 键移动到下一个AccordionSummary。此处出于可访问性的原因，以便用户在使用键盘导航时可以知道焦点在手风琴中的位置。

您可以使用以下方法覆盖它：

import MuiAccordionSummary from "@material-ui/core/AccordionSummary";
import { withStyles } from "@material-ui/core/styles";

const AccordionSummary = withStyles({
  root: {
    "&.Mui-focused": {
      backgroundColor: "inherit"
    }
  }
})(MuiAccordionSummary);

Accordion demos