React中Material UI垂直时间线CSS失效问题排查求助

在React中使用Material UI实现垂直时间线，代码编写完成后CSS样式不生效，需排查错误。

依赖版本 #

• "@emotion/react": "^11.11.1"
• "@mui/icons-material": "^5.14.8"
• "@mui/lab": "^5.0.0-alpha.143"
• "@mui/material": "^5.14.8"
• "@emotion/core": "^10.0.7"
• "@emotion/styled": "^10.3.0"
• "react": "^17.0.2"
• "react-dom": "^17.0.2"
• "react-scripts": "^4.0.0"

参考MUI官网时间线示例编写的代码如下：

import React from 'react';
import { connect } from 'react-redux';
import Timeline from '@mui/lab/Timeline';
import TimelineItem from '@mui/lab/TimelineItem';
import TimelineSeparator from '@mui/lab/TimelineSeparator';
import TimelineConnector from '@mui/lab/TimelineConnector';
import TimelineContent from '@mui/lab/TimelineContent';
import TimelineDot from '@mui/lab/TimelineDot';
import { StyledEngineProvider } from '@mui/material/styles';
import TimelineOppositeContent from '@mui/lab/TimelineOppositeContent';

class Template1 extends React.Component {
    constructor(props) {
        super(props);

    }

    render() {
        return (
            <StyledEngineProvider injectFirst>
                <Timeline position="alternate">
                    <TimelineItem>
                        <TimelineOppositeContent color="text.secondary">
                            09:30 am
                        </TimelineOppositeContent>
                        <TimelineSeparator>
                            <TimelineDot />
                            <TimelineConnector />
                        </TimelineSeparator>
                        <TimelineContent>Eat</TimelineContent>
                    </TimelineItem>
                    <TimelineItem>
                        <TimelineOppositeContent color="text.secondary">
                            10:00 am
                        </TimelineOppositeContent>
                        <TimelineSeparator>
                            <TimelineDot />
                            <TimelineConnector />
                        </TimelineSeparator>
                        <TimelineContent>Code</TimelineContent>
                    </TimelineItem>
                    <TimelineItem>
                        <TimelineOppositeContent color="text.secondary">
                            12:00 am
                        </TimelineOppositeContent>
                        <TimelineSeparator>
                            <TimelineDot />
                            <TimelineConnector />
                        </TimelineSeparator>
                        <TimelineContent>Sleep</TimelineContent>
                    </TimelineItem>
                    <TimelineItem>
                        <TimelineOppositeContent color="text.secondary">
                            9:00 am
                        </TimelineOppositeContent>
                        <TimelineSeparator>
                            <TimelineDot />
                            <TimelineConnector />
                        </TimelineSeparator>
                        <TimelineContent>Repeat</TimelineContent>
                    </TimelineItem>
                </Timeline>
            </StyledEngineProvider>
        );
    }
}

const mapStateToProps = state => ({
    socketUrl: state.behavior.get('socketUrl')
});

export default connect(mapStateToProps)(Template1);

• 修复Emotion版本冲突
  目前混用了@emotion/react 11.x和@emotion/core、@emotion/styled 10.x版本，MUI 5依赖Emotion 11，版本不兼容会导致样式失效。执行以下命令调整依赖：

  npm uninstall @emotion/core @emotion/styled
  npm install @emotion/styled@^11.11.0
  

• 调整StyledEngineProvider位置
  不要在组件内部包裹StyledEngineProvider，应将其提升到应用根组件层级（如index.js），确保所有MUI组件都能正确使用样式引擎。示例：

  import React from 'react';
  import ReactDOM from 'react-dom';
  import { StyledEngineProvider } from '@mui/material/styles';
  import App from './App';
  
  ReactDOM.render(
    <StyledEngineProvider injectFirst>
      <App />
    </StyledEngineProvider>,
    document.getElementById('root')
  );
  

  之后移除Template1组件内的StyledEngineProvider包裹代码。

• 修正TimelineConnector冗余
  最后一个TimelineItem不需要TimelineConnector（无后续项可连接），虽然不影响样式生效，但符合规范的写法应移除：

  <TimelineItem>
    <TimelineOppositeContent color="text.secondary">
      9:00 am
    </TimelineOppositeContent>
    <TimelineSeparator>
      <TimelineDot />
      {/* 移除此处的TimelineConnector */}
    </TimelineSeparator>
    <TimelineContent>Repeat</TimelineContent>
  </TimelineItem>
  

• 可选：升级react-scripts版本
  当前react-scripts 4.x兼容React 17，但如果后续仍有样式问题，可尝试升级到react-scripts 5.x（升级前请备份项目）。

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