npm install @mui/material @emotion/react @emotion/styled

或者使用

yarn yarn add @mui/material @emotion/react @emotion/styled 

import * as React from 'react';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';

export default class CalculationResultForDemo extends React.Component {
  state = {
    selectedTab: 0 // 跟踪所选选项卡的新状态
  }

  constructor(props) {
    super(props);
    this.renderResult = this.renderResult.bind(this);
    this.handleChangeTab = this.handleChangeTab.bind(this); // 绑定新方法
  }

  handleChangeTab(event, newValue) {
    this.setState({ selectedTab: newValue });
  }

  renderSummaryTable() {
    // 你现有的renderSummaryTable实现
  }

  renderMaterialTable() {
    // 你现有的renderMaterialTable实现
  }

  renderAlgorithmTable() {
    // 你现有的renderAlgorithmTable实现
  }

  renderResult() {
    return (
      <Box sx={{ width: '100%' }}>
        <Tabs value={this.state.selectedTab} onChange={this.handleChangeTab} aria-label="basic tabs example">
          <Tab label="总表" />
          <Tab label="物质表" />
          <Tab label="算法表" />
        </Tabs>
        <Box sx={{ p: 3 }}>
          {this.state.selectedTab === 0 && this.renderSummaryTable()}
          {this.state.selectedTab === 1 && this.renderMaterialTable()}
          {this.state.selectedTab === 2 && this.renderAlgorithmTable()}
        </Box>
      </Box>
    );
  }

  render() {
    return (
      <div>
        {this.renderResult()}
      </div>
    );
  }
}