Material UI组件渲染时样式类名异常变更问题求助

我在使用React结合Material UI开发InternalDialpad组件时，引入了自定义sharedTheme样式。目前元素已被分配样式类，但每次渲染组件时，元素的样式类名会发生变化，或新增带有额外CSS样式的同类名，不清楚原因。

组件代码 #

import React from 'react';
import FormControl from '@material-ui/core/FormControl';
import MenuItem from '@material-ui/core/MenuItem';
import Select from '@material-ui/core/Select';
import Button from '@material-ui/core/Button';
import { makeStyles } from "@material-ui/core/styles";
import sharedTheme from '../../styling/theme.js';
import { Icon } from '@twilio/flex-ui';
import { withStyles } from '@material-ui/core/styles';
import { makeInternalCall } from './index';
import { StylesProvider } from '@material-ui/core/styles';
import { createGenerateClassName } from '@material-ui/core/styles';

const styles = theme => (sharedTheme(theme));

class InternalDialpad extends React.Component {
.........

render() {
        const { classes, manager } = this.props;
        const { contact_uri: worker_contact_uri } =
            manager.workerClient.attributes;

        return (
            <div className={classes.boxDialpad}>
                <div className={classes.titleAgentDialpad}>Call Agent</div>
                <div className={classes.subtitleDialpad}>Select agent</div>
                <FormControl className={classes.formControl}>
                    <Select
                        value={this.state.selectedWorker}
                        onChange={this.handleChange}
                        isClearable
                    >
                        {this.state.workerList.map((worker)=> {
                                const { activity_name } = worker;
                                const { contact_uri, full_name } = worker.attributes;

                                return (
                                    contact_uri !== worker_contact_uri && 
                                    activity_name !== "Offline" 
                                ) ? (
                                    <MenuItem value={contact_uri} key={contact_uri}>
                                        {full_name}
                                    </MenuItem>
                                ) : null
                            }
                        )}
                    </Select>
                    <div className={classes.buttonAgentDialpad}>
                        <Button 
                            variant="contained" 
                            color="primary" 
                            disabled={!this.state.selectedWorker} 
                            onClick={this.makeCall}
                            className={classes.dialPadBtn}
                        >
                            <Icon icon="Call"/>
                        </Button>
                    </div>
                </FormControl>
            </div>
        )
            }
}

export default withStyles(styles)(InternalDialpad);

Theme.js代码 #

const sharedTheme = (theme) => ({

root: {
flexGrow: 1,
display: "flex",
flexWrap: "wrap",
},
main:{
  margin: 0,
  padding: 0
},
formControl: {
  width: "250px",
},
boxDialpad: {
  borderTop: "1px solid #eeeeee",
},
titleAgentDialpad: {
  width: "100%",
  textTransform: "uppercase",
  textAlign: "center",
  fontWeight: "bold",
  fontSize: theme.typography.fontSize,
},
subtitleDialpad: {
  textTransform: "uppercase",
},
buttonAgentDialpad: {
  display: "flex",
  justifyContent: "center",
},
dialPadBtn: {
  borderRadius: "100px",
  minWidth: "0px",
}
});

问题截图 #

首次渲染：

再次渲染：

问题原因及解决方案 #

1. 核心原因

   • 组件中同时导入了多个Material UI样式工具（makeStyles/withStyles/StylesProvider等），未统一方案导致样式生成逻辑冲突；同时sharedTheme作为动态样式函数，在Theme上下文变化或组件重复挂载时，会触发样式重新计算，生成新类名。
   • 若组件挂载逻辑不稳定（比如父组件每次渲染生成新的组件实例），也会导致样式重复注入。

2. 解决步骤

   • 统一样式方案：类组件仅保留withStyles，移除未使用的makeStyles/StylesProvider/createGenerateClassName导入，避免工具冲突。
   • 稳定样式函数：确保sharedTheme是纯函数或静态对象，避免每次调用生成新的样式结构。若依赖Theme上下文，确保全局Theme是单例实例。
   • 固定类名生成规则（可选）：如果是多实例/微前端环境，在应用根节点配置全局StylesProvider，指定固定前缀的类名生成器，保证类名唯一稳定：

     // 应用根组件中配置
     const generateClassName = createGenerateClassName({
       productionPrefix: 'internal-dialpad',
     });
     
     function App() {
       return (
         <StylesProvider generateClassName={generateClassName}>
           {/* 你的应用组件 */}
         </StylesProvider>
       );
     }
     

   • 检查组件挂载逻辑：确保InternalDialpad组件在父组件中存在稳定的key，避免重复创建组件实例导致样式重复注入。

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