Стиль переопределения вкладок в Material-UI (без левого / правого заполнения)

Question

Мне нужно переопределить заполнение n вкладок, чтобы индикатор был такой же длины, как текст: https://i.imgur.com/qJl0jMo.png

Я играл с этим примером: https://codesandbox.io/s/o4wp31yo95 ... безуспешно,Мне нужно удалить левый / правый отступ из базы кнопок, но я не знаю, как это сделать

Answer 1

Добавьте к своим стилям следующее:

labelContainer: {
    padding: 0,
},

А затем добавьте его к вам <Tab> компонентов. Как:

classes={{ root: classes.tabRoot, selected: classes.tabSelected, labelContainer: classes.labelContainer }}

Это сделает индикатор такой же длины, что и текст, но только для текстов, длина которых превышает 72 пикселя, из-за minWidth: 72 на tabRoot. Чтобы это работало для небольших текстов, также уменьшите это значение.