解决MUI Accordion聚焦输入框时自动变灰的问题

我正在开发MUI Accordion组件，已经实现输入框内容同步更新Accordion Summary文本的功能（功能正常），但点击激活输入框时，Accordion会自动变成灰色。

当前代码示例：

<Accordion>
  <AccordionSummary
    expandIcon={<ExpandMoreIcon />}
    aria-controls="panel1a-content"
    id="panel1a-header"
  >
    <UsersInput 
      type="text"  
      name="experience" 
      placeholder="A question you face often while hiring"
      onChange={handleInputField} 
    />
  </AccordionSummary>
  <AccordionDetails>
    <div>
      <PlainTextEditorExample/>
    </div>
  </AccordionDetails>
</Accordion>

问题根源 #

问题出在MUI的Accordion默认逻辑：当内部的可聚焦元素（比如输入框）获得焦点时，Accordion会触发自身的聚焦状态，从而显示灰色背景样式。

解决办法 #

办法1：阻止输入框焦点事件冒泡

给输入框添加onFocus事件，阻止事件向上传递给Accordion，避免触发Accordion的聚焦样式：

<UsersInput 
  type="text"  
  name="experience" 
  placeholder="A question you face often while hiring"
  onChange={handleInputField}
  onFocus={(e) => e.stopPropagation()}
/>

办法2：覆盖Accordion的聚焦样式

通过sx属性直接修改Accordion聚焦时的背景色，使其与默认状态一致：

<Accordion
  sx={{
    '&:focus-visible': {
      backgroundColor: 'transparent', // 或与你默认背景色匹配的值
      boxShadow: 'none' // 可选：移除聚焦时的阴影效果
    }
  }}
>
  {/* 原Accordion内容 */}
</Accordion>

办法3：封装全局可用的自定义Accordion

如果多个组件需要这个效果，用MUI的styled组件封装无聚焦样式的Accordion：

import { styled } from '@mui/material/styles';
import Accordion from '@mui/material/Accordion';

const NoFocusAccordion = styled(Accordion)(({ theme }) => ({
  '&:focus-visible': {
    backgroundColor: 'transparent',
    boxShadow: 'none',
  },
}));

// 替换原组件使用
<NoFocusAccordion>
  {/* 原内容 */}
</NoFocusAccordion>

推荐方案 #

优先选择办法1，仅针对输入框的焦点事件处理，不会影响Accordion本身的展开/收起等其他交互逻辑，改动最小且精准。

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