Mui PrivateTabScrollButton 覆盖css中的width和flex属性

Question

• 我正在尝试覆盖 MuiPrivateTabScrollButton 的 css。
• 但是这个类是从材料 ui 生成的，所以我无法覆盖。
• 即使我通过设置边框颜色进行了调试并找到了修复方法，但我仍然无法找到。
• 我所有的代码都在 tab-demo.js
• 能否告诉我如何修复它，以便我以后自己修复它。
• 在下面提供我的代码 sn-p 和沙箱

https://codesandbox.io/s/n5l8znn2y0

更新 1：删除不必要的代码以便于调试 https://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"
    }
  },

Answer 1

在每个 Material-UI 组件的文档中都有一个 CSS 部分，指示可以传入的类以控制不同方面的 CSS。 Here is that documentation for Tabs.

你特别关心：

scrollButtons 应用于 ScrollButtonComponent 组件的样式。

然后您需要通过classes 属性指定适当的类。

例如，如果您在传递给withStyles 的样式中有以下内容：

const styles = theme => ({

  tabsScrollButton: {
    backgroundColor: "green"
  }
};

然后您可以像下面这样利用该类：

<Tabs
   classes={{ scrollButtons: props.classes.tabsScrollButton }}
>