CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Abdullah Mujahid
Abdullah Mujahid

Reputation: 917

Change Icon color inside the tab MUI

I am trying to change the tab icon colour of the Tab which is highlighted and keep unchanged for the rest but I am unable to figure it out. I am passing MUI component inside the icon button.

 <Tab
                icon={
                  <Icon
                    color={cinchdark}
                    name={item.icon}
                    size='small'
                  />
                }
                key={item.name}
                label = {
                  <Typography variant='button'>{item.name}          </Typography>
                }
                {...a11yProps(index)}
              />))}
          </Tabs>

WHAT I AM TRYING TO ACHIEVE

enter image description here

HOW IT IS LOOKING RIGHT NOW

enter image description here

Upvotes: 1

Views: 1380

Answers (1)

Sakshi Mahajan
Sakshi Mahajan

Reputation: 621

For Icon, you can add color in classname in component

className={classes.icon}
icon: {
    color: '#F48273',
},

To change the indicator color either you can use props

TabIndicatorProps={{className: classes.tabIndicator}}

and add background color in the class or if this is from your theme you can simply add

indicatorColor="primary"
textColor="primary"

In your Tabs component.

Upvotes: 1

Related Questions