Как изменить цвет подчеркивания компонента React Tabs в MaterialUI?

Я заметил, что на веб-сайте MaterialUI нет документации в отношении изменения цвета подчеркивания их компонента вкладок...

http://www.material-ui.com/#/components/tabs


reactjs material-ui tabs underline
person Mike E    schedule 26.01.2018    source источник

Ответы (4)


arrow_upward
7
arrow_downward

Используйте свойство TabIndicatorProps, чтобы изменить цвет подчеркивания.

<Tabs TabIndicatorProps={{style: {backgroundColor: "white"}}}>
   <Tab label='Tab 1'/>
   <Tab label='Tab 2'/>
</Tabs>
person ngPranav    schedule 02.01.2019

arrow_upward
1
arrow_downward

Это свойство можно изменить с помощью реквизита inkBarStyle:

<Tabs inkBarStyle={{backgroundColor: '#e77600'}}>
   <Tab label='Tab 1'/>
   <Tab label='Tab 2'/>
</Tabs>
person Mike E    schedule 26.01.2018

arrow_upward
-1
arrow_downward 

<Tabs indicatorColor="white">
   <Tab label="Tab 1"/>
   <Tab label="Tab 2"/>
</Tabs>

Цвет индикатора может принимать любой цвет, например, белый, красный, зеленый и т. д.

person Jolaade Adewale    schedule 22.01.2019

arrow_upward
-1
arrow_downward

В последней версии пользовательского интерфейса материала v4.9.11 вам нужно использовать свойства индикатора, чтобы применить цвет подчеркивания.

<Tabs indicator={{backgroundColor: '#e77600'}}>
   <Tab label='Tab 1'/>
   <Tab label='Tab 2'/>
</Tabs>
person Hemadri Dasari    schedule 20.04.2020