MuiPrivateTabScrollButton перезаписывает свойство width и flex в css

Question

• Я пытаюсь переписать CSS-файл MuiPrivateTabScrollButton.
• но этот класс создан из материального интерфейса, поэтому я не могу перезаписать его.
• даже я отладил, поставив цвета границ и выяснил, что исправить, но все равно не смог найти.
• весь мой код находится в tab-demo.js
• Можете ли вы сказать мне, как это исправить, чтобы в будущем я исправил это сам.
• предоставив мой фрагмент кода и песочницу ниже

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 для различных аспектов. Вот эта документация для вкладок.

В частности, вы заботитесь о:

scrollButtons Стили, применяемые к компоненту ScrollButtonComponent.

Затем вам нужно указать соответствующий класс с помощью свойства classes.

Например, если у вас есть следующие стили, переданные в withStyles:

const styles = theme => ({

  tabsScrollButton: {
    backgroundColor: "green"
  }
};

Тогда вы быиспользовать этот класс, как показано ниже:

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