Как изменить цвет и толщину активной вкладки inkBarStyle в React Material-UI?

Question

Смотрите этот вопрос здесь: Как изменить цвет активной вкладки в React material-ui?

И этот ответ здесь: https://stackoverflow.com/a/37332913/4561887

Ответ, который они дали, работает:

<Tabs inkBarStyle={{background: 'blue'}}>...

Но я также хотел бы изменить чернильный стиль и сделать его чернее и толще. Вот документация по вкладкам Material-UI, где я нашел свойство inkBarStyle Tabs: http://www.material -ui.com / # / components / tabs .

Вот что я пробовал. Все не удалось:

<Tabs inkBarStyle={{background: 'black'}, {background-size: 100% 300%}}>
<Tabs inkBarStyle={{background: 'black', background-size: 100% 300%}}>
<Tabs inkBarStyle={{background: 'black', height: 100px}}>
etc.

Кроме того, где я могу найти список возможных опций inkBarStyle, которые я могу установить здесь, и как мне установить несколько опций одновременно? Могу ли я использовать любое свойство CSS здесь? Пример: список: http://www.htmldog.com/references/css/properties/

Пожалуйста, будьте любезны: я программист (микроконтроллер), пытаюсь изменить графический интерфейс. Выход из моей лиги здесь ...

Answer 1

Если вы осмотрите этот элемент ink, вы увидите, что его толщина определяется как height.

Так что вам нужно будет пройти, кроме того, что background - это значение height, которое выхочу .. т.е.

inkBarStyle={{ background: "#000", height: "5px", marginTop: "-5px" }}

Требуется значение marginTop, чтобы чернила не выходили за пределы элемента Tab.Вы можете поиграть с этим здесь:

https://codesandbox.io/s/jpnr541543
Компонент Hello.js имеет код, связанный с вкладками.