MuiPrivateTabScrollButton overwite the width and flex property in css

• I am trying to overwrite the css of MuiPrivateTabScrollButton.
• but this class is generated from material ui so I am not able to overwite.
• even I debugged by putting border colors and find out the fix, but still I am not able to findout.
• all my code is in tab-demo.js
• Can you tell me how to fix it, so that in future I will fix it myself.
• providing my code snippet and sandbox below

https://codesandbox.io/s/n5l8znn2y0

update 1: removed unnecessary code for easy debugginghttps://codesandbox.io/s/8xw88yl9j0

MuiPrivateTabScrollButton: {
width: "0 !important"
},

tabRoot: {
    textTransform: "initial",
    width: "stretch",
    display: "flex",
    flex: 1,
    border: "1px solid red",

    "&:hover": {
      color: "red",
      opacity: 1,
      textTransform: "initial"
    },
    "&$tabSelected": {
      color: "red",
      fontWeight: theme.typography.fontWeightMedium,
      textTransform: "capitalize"
    },
    "&:focus": {
      color: "red",
      textTransform: "capitalize"
    }
  },