0
171
ViewsChange 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
HOW IT IS LOOKING RIGHT NOW
·
Juan Pablo Isaza
1 answers
Answer question0
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.
·
Juan Pablo Isaza
Report
Answer question