修改Material UI Autocomplete分组及选项文字字号，不改变输入框尺寸

要单独修改分组式Autocomplete的分组标题和选项文字字号且不影响输入框尺寸，核心是直接覆盖组件内置的CSS类样式——Typography组件失效通常是因为内置样式优先级更高，无法被嵌套的Typography覆盖。以下是两种可靠的实现方式：

方法一：使用sx属性直接定制样式 #

通过sx属性直接定位分组标题（.MuiAutocomplete-groupLabel）和选项（.MuiAutocomplete-option）的类选择器，修改字号：

import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

const groupedOptions = [
  { group: '前端框架', label: 'React' },
  { group: '前端框架', label: 'Vue' },
  { group: '后端语言', label: 'Node.js' },
  { group: '后端语言', label: 'Python' },
];

export default function CustomizedGroupedAutocomplete() {
  return (
    <Autocomplete
      sx={{
        // 修改分组标题字号
        '& .MuiAutocomplete-groupLabel': {
          fontSize: '1.2rem',
          color: '#2d3748', // 可选，调整颜色增强区分度
        },
        // 修改选项文字字号
        '& .MuiAutocomplete-option': {
          fontSize: '0.9rem',
        },
      }}
      options={groupedOptions}
      groupBy={(option) => option.group}
      getOptionLabel={(option) => option.label}
      renderInput={(params) => <TextField {...params} label="技术选型" />}
    />
  );
}

方法二：使用styled组件封装（适合复用场景） #

如果多个组件需要相同样式，用styled封装Autocomplete，统一配置样式：

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

const StyledGroupedAutocomplete = styled(Autocomplete)(({ theme }) => ({
  '& .MuiAutocomplete-groupLabel': {
    fontSize: theme.typography.subtitle1.fontSize, // 复用主题字号变量
    fontWeight: 600,
  },
  '& .MuiAutocomplete-option': {
    fontSize: theme.typography.body2.fontSize,
  },
}));

const groupedOptions = [/* 选项数据 */];

export default function ReusableAutocomplete() {
  return (
    <StyledGroupedAutocomplete
      options={groupedOptions}
      groupBy={(option) => option.group}
      getOptionLabel={(option) => option.label}
      renderInput={(params) => <TextField {...params} label="可复用分组选择器" />}
    />
  );
}

关键说明 #

• 避免直接嵌套Typography：Autocomplete下拉面板的内置元素会自带默认样式，嵌套Typography无法突破优先级限制，直接通过类选择器修改是更直接的方案。
• 不影响输入框：上述样式仅作用于下拉面板内的分组标题和选项，输入框的尺寸、字号会保持原有配置不受影响。

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