To fix overriding the React Material UI styles not working, we call makeStyles to create classes with the styles.

Then we can apply them with the useStyles hook.

For instance, we write

import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles((theme) => ({
  tabRoot: {
    // ...
  },
  flexContainer: {
    width: "100%",
    justifyContent: "space-between",
  },
}));

export default useStyles;

to call makeStyles with an arrow function that returns an object with the class names as the properties and the styles in an object as values.

Then in the component, we write

const classes = useStyles();
// ...

<Tabs
  classes={{ flexContainer: classes.flexContainer }} // override for tabs
  //  ...
>
  <Tab classes={{ root: classes.tabRoot }} /> // override for tab
</Tabs>

to call the useStyles hook that was returned and imported.

And then we set the classes prop to an object with the classes properties returned from useStyles to apply the styles.