React MUI <Tab> component "Expected an element type that can hold a ref."-CodePudding

I am working with

CodePudding user response：

The Tab component doesn't have a prop component. Under the hood, Tab is using ButtonBase, hence when it is being provided component it complains. If you want to just add an Icon and style, you should follow the docs on customizing tabs here. You can provide an Icon, and center the label and styled like so:

import * as React from "react";
import Tabs from "@mui/material/Tabs";
import Tab, { TabProps } from "@mui/material/Tab";
import PhoneIcon from "@mui/icons-material/Phone";
import { styled } from "@mui/material";

const CustomTab = styled(Tab)<TabProps>(({ theme }) => ({
  "&.MuiButtonBase-root": {
    fontSize: "20px",
    marginTop: -3
  }
}));

export default function IconTabs() {
  return (
    <Tabs>
      <CustomTab icon={<PhoneIcon />} label="phone" />
    </Tabs>
  );
}

If you need more control, you could consider using TabUnstyled in the base library and you will have complete control of the components show in the base docs