ExpansionPanel内TextField聚焦时背景色强制变为#E0E0E0的问题求助

我之前也碰到过这个坑！这是因为Material UI的ExpansionPanel在内部元素获得焦点时，会自动触发默认的聚焦状态样式，直接把背景色改成了#E0E0E0，在深色主题下确实会让TextField变得几乎看不清。下面给你几个亲测有效的解决办法：

方法一：直接覆盖ExpansionPanel的聚焦状态样式 #

最直接的方式就是强制覆盖ExpansionPanel在:focus-visible状态下的背景色，让它和正常状态保持一致。你可以用sx属性快速实现，或者用styled组件自定义：

用sx属性的代码示例： #

<ExpansionPanel
  sx={{
    // 覆盖聚焦时的背景色，用透明或者和主题匹配的颜色
    '&:focus-visible': {
      backgroundColor: 'transparent',
      boxShadow: 'none', // 可选，去掉聚焦时的默认阴影
    },
    // 展开状态下也保持主题背景色，避免切换时突兀
    '&.Mui-expanded': {
      backgroundColor: 'background.paper',
    },
  }}
>
  <ExpansionPanelSummary>
    <TextField label="输入内容" />
  </ExpansionPanelSummary>
  <ExpansionPanelDetails>
    {/* 这里放面板展开后的内容 */}
  </ExpansionPanelDetails>
</ExpansionPanel>

用styled组件的版本： #

如果你需要在多个地方复用这个自定义面板，可以用styled组件封装：

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

const CustomExpansionPanel = styled(ExpansionPanel)(({ theme }) => ({
  '&:focus-visible': {
    backgroundColor: theme.palette.background.paper,
    boxShadow: 'none',
  },
}));

// 之后直接用CustomExpansionPanel替换原来的ExpansionPanel就行

方法二：调整TextField的层级和事件冒泡 #

另一种思路是让TextField的层级更高，或者阻止焦点事件冒泡到面板，避免触发面板的聚焦样式。不过这种方法不如直接覆盖样式稳定，但也可以试试：

<TextField
  label="输入内容"
  sx={{
    zIndex: 1,
    // 深色主题下强制设置文字颜色，确保可见
    '& input': {
      color: 'text.primary',
    },
  }}
  onFocus={(e) => e.stopPropagation()}
/>

方法三：迁移到新版Accordion组件 #

要注意的是，ExpansionPanel在Material UI v5已经被标记为过时了，官方推荐使用Accordion组件。Accordion的样式控制更灵活，默认的聚焦行为也更合理，迁移过去后这类问题会少很多：

import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';

<Accordion sx={{
  '&:focus-visible': {
    backgroundColor: 'background.paper',
  },
}}>
  <AccordionSummary>
    <TextField label="输入内容" />
  </AccordionSummary>
  <AccordionDetails>
    {/* 展开后的内容 */}
  </AccordionDetails>
</Accordion>

额外提醒：深色主题适配 #

不管用哪种方法，都尽量用Material UI主题里的变量（比如theme.palette.background.paper、theme.palette.text.primary）来设置颜色，而不是硬写#E0E0E0这类固定值，这样在切换主题时能自动适配，不用重复改代码。

内容的提问来源于stack exchange，提问作者y-me