javascript - Material ui 中选项卡的内联样式不会改变颜色

Question

我是 Material UI 的新手，正在尝试更改所选选项卡的颜色。

现在它是深蓝色，我正在尝试将其更改为红色。

我提供了内联样式，但它没有改变。你能告诉我如何解决吗？

我在下面提供了我的沙箱和代码片段

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

您可以使用 CSS API 覆盖选项卡的样式，

举个例子:

<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>

然后我将样式添加为:

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: {}
});

这是您的代码中的一个工作示例:https://codesandbox.io/s/882o65xlyl

希望对你有帮助