inline styles for tabs in material ui doesn't change color

Question

I am new to material ui and am trying to change the colors for the selected tab.

Right now it's dark blue in color and I am trying to change it to red.

I gave the inline styles, but it's not changing. Can you tell me how to fix it?

I am providing my sandbox and code snippet below

https://codesandbox.io/s/yqj5q8v461

<Tabs
  value={value}
  onChange={this.handleChange}
  scrollable
  scrollButtons="on"
  indicatorColor="primary"
  textColor="primary"
>
  <Tab
   label="Search"
   icon={<PhoneIcon />}
   style={{ border: "red" }}
  />
  <Tab
   favorites={favorites}
   label="Favorites"
   icon={<FavoriteIcon />}
  />
</Tabs>

Answer 1

you can override the styles of tabs using CSS API,

as an example:

<Tabs
  value={value}
  onChange={this.handleChange}
  scrollable
  scrollButtons="on"
  classes={{ indicator: classes.tabsIndicator }}
>
  <Tab
   label="Search"
   icon={<PhoneIcon />}
   classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
  />
  <Tab
   favorites={favorites}
   label="Favorites"
   icon={<FavoriteIcon />}
   classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
  />
</Tabs>

then I have added styles as:

const styles = theme => ({
  root: {
    flexGrow: 1,
    width: "100%",
    backgroundColor: theme.palette.background.paper
  },
  tabsIndicator: {
    backgroundColor: "red"
  },
  tabRoot: {
    "&:hover": {
      color: "red",
      opacity: 1
    },
    "&$tabSelected": {
      color: "red",
      fontWeight: theme.typography.fontWeightMedium
    },
    "&:focus": {
      color: "red"
    }
  },
  tabSelected: {}
});

here is a working example from your code: https://codesandbox.io/s/882o65xlyl

hope this will help you

Answer 2

试试这个： border: '1px solid red'

Answer 3

if you interested other design framework, I recommend you Ant-design.

You can check for the inform here