CODEWITHSUNDEEP
reactjsmaterial-ui
Kiko
Kiko

Reputation: 29

Material-UI Tabs: Change text color of selected tab by overriding default theme

//Tab
MuiTab: {
  root: {
    background: "transparent",
    borderBottom: `1px solid ${colors.primary}`,
    textAlign: "center",
  },
  selected: {
    color: colors.primary, //not working
  },
  wrapper: {
    fontSize: "16px",
    textTransform: "none",
    color: "black",
    // border: "1px solid red",
  },
},
//Tabs
MuiTabs: {
  indicator: {
    
    color: colors.primary,
  },
},

Although wrapper styling is working, managed to change text color to actual black but I want to change the text color of selected tab to "primary" color. Also what's this selected object for, if its not changing the color.

Thanks in advance🙂

Upvotes: 0

Views: 544

Answers (1)

Akis
Akis

Reputation: 2252

For changing the selected try this one that worked for me before:

MuiTab: {
  styleOverrides: {
    root: {
      '&.Mui-selected': {
        color: 'red', // replace with your primary color here
      },
    },
  }
},

Upvotes: 1

Related Questions