React类组件中如何修改MUI Autocomplete组件的分组标签样式

方案1：通过renderGroup属性自定义分组标签（最灵活） #

Autocomplete原生支持renderGroup属性，无需依赖Hooks，类组件中直接定义渲染逻辑即可，可完全自定义分组标签的样式、结构，适配你已有的深色背景配置：

import React from 'react';
import Autocomplete from '@material-ui/lab/Autocomplete';
import ListSubheader from '@material-ui/core/ListSubheader';
import TextField from '@material-ui/core/TextField';
// 你已实现的深色背景Paper组件
import CustomDarkPaper from './CustomDarkPaper';

class GroupAutocomplete extends React.Component {
  // 自定义分组渲染方法
  renderGroup = (groupParams) => {
    return (
      <li key={groupParams.key}>
        <ListSubheader 
          component="div"
          // 直接内联样式或传入className自定义样式
          style={{
            backgroundColor: '#1e1e1e',
            color: '#ffffff',
            fontWeight: 600,
            padding: '8px 16px'
          }}
        >
          {groupParams.group}
        </ListSubheader>
        {groupParams.children}
      </li>
    );
  };

  render() {
    return (
      <Autocomplete
        options={yourOptions} // 你的选项数据
        groupBy={(option) => option.category} // 分组规则
        PaperComponent={CustomDarkPaper}
        renderGroup={this.renderGroup} // 传入自定义分组渲染逻辑
        renderInput={(params) => <TextField {...params} label="选项选择" />}
      />
    )
  }
}

方案2：通过withStyles高阶组件注入自定义类到groupLabel #

你提到的classes.groupLabel确实仅支持字符串值，可使用类组件兼容的withStyles高阶组件生成对应样式的类名，传入即可生效：

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Autocomplete from '@material-ui/lab/Autocomplete';
import TextField from '@material-ui/core/TextField';
import CustomDarkPaper from './CustomDarkPaper';

// 定义分组标签样式
const customStyles = {
  darkGroupLabel: {
    backgroundColor: '#1e1e1e',
    color: '#ffffff',
    fontSize: '14px',
    fontWeight: 700,
    lineHeight: '32px'
  }
};

class GroupAutocomplete extends React.Component {
  render() {
    const { classes } = this.props; // withStyles自动注入的样式类
    return (
      <Autocomplete
        options={yourOptions}
        groupBy={(option) => option.category}
        PaperComponent={CustomDarkPaper}
        classes={{
          groupLabel: classes.darkGroupLabel // 传入生成的类名字符串
        }}
        renderInput={(params) => <TextField {...params} label="选项选择" />}
      />
    )
  }
}

// 导出时用withStyles包裹组件
export default withStyles(customStyles)(GroupAutocomplete);

之前全局主题覆盖不生效的原因 #

你之前直接覆写MuiListSubheader样式未生效，是因为Autocomplete内部的groupLabel样式优先级更高，你可以直接在全局主题中覆写MuiAutocomplete下的groupLabel属性即可生效：

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  overrides: {
    MuiAutocomplete: {
      groupLabel: {
        backgroundColor: '#1e1e1e',
        color: '#ffffff'
      }
    }
  }
});

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