Material UI Autocomplete列表框样式无效，如何设置首个分组高度？

排查样式不生效的核心方向 #

1. 确认DOM结构匹配选择器
   打开浏览器开发者工具，查看.MuiAutocomplete-listbox内部的DOM结构：groupBy生成的每个分组是<li class="MuiAutocomplete-group">，内部包含分组标签和<ul>。如果你的选择器不生效，大概率是选择器精度不够，或者第一个<li>并非目标分组（比如存在隐藏元素）。建议改用更精准的选择器：

   '& .MuiAutocomplete-listbox > .MuiAutocomplete-group:first-of-type > ul': {
     maxHeight: '208px',
     overflowX: 'hidden',
     overflowY: 'auto',
   }
   

2. 提升样式优先级
   MUI的内联样式或默认类可能覆盖你的自定义样式，可以通过以下方式调整：

   • 给Autocomplete添加自定义类名，结合类名编写选择器：

     // 定义样式
     const useStyles = makeStyles({
       customAuto: {
         '& .MuiAutocomplete-listbox > .MuiAutocomplete-group:first-of-type > ul': {
           maxHeight: '208px',
           overflow: 'auto',
         }
       }
     });
     // 组件使用
     <Autocomplete className={classes.customAuto} groupBy={...} />
     

   • 临时用!important验证是否是优先级问题（不推荐长期使用）：

     maxHeight: '208px !important',
     

3. 利用MUI的styled组件封装
   用styled组件直接修改Autocomplete的样式，避免类名冲突：

   import { styled } from '@mui/material/styles';
   import Autocomplete from '@mui/material/Autocomplete';
   
   const StyledAuto = styled(Autocomplete)`
     .MuiAutocomplete-listbox {
       > .MuiAutocomplete-group:first-of-type > ul {
         max-height: 208px;
         overflow-x: hidden;
         overflow-y: auto;
       }
     }
   `;
   
   // 使用封装后的组件
   <StyledAuto groupBy={...} />
   

关于相关Issue的补充说明 #

你提到的Issue涉及分组样式的优先级与渲染逻辑问题，核心表现为动态生成的分组元素无法被常规选择器命中。解决时可以：

• 确保组件挂载后样式已生效（避免SSR或异步渲染导致的样式延迟）
• 检查是否有MUI默认的maxHeight属性覆盖你的设置，在开发者工具中查看元素的样式继承链，找到冲突的样式源

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