Question

我正在尝试更改选项卡的背景颜色。我尝试使用下面的classes道具来覆盖这些类，但没有任何效果！我错过了什么或者这是不可能的事情吗？

classes={{
  rootInherit: {
    backgroudColor: '#0000ff' 
  },
  rootPrimary: {
    backgroudColor: '#0000ff' 
  },
  rootPrimarySelected: {
    backgroudColor: '#0000ff' 
  },
  rootPrimaryDisabled: {
    backgroudColor: '#0000ff' 
  },
  rootSecondary: {
    backgroudColor: '#0000ff'
  },
  rootSecondarySelected: {
    backgroudColor: '#0000ff'
  },
  rootSecondaryDisabled: {
    backgroudColor: '#0000ff' 
  },
  rootInheritSelected: {
    backgroudColor: '#0000ff' 
  },
  rootInheritDisabled: {
    backgroudColor: '#0000ff'
  }
}}

Answer 1

是的，这绝对是可能的。要更改所选Tab的颜色，您需要设置backgroundColor并覆盖每个rootSecondarySelected，rootPrimarySelected，rootInheritSelected类个人Tab组件：

const styles = theme => ({
  colorfulTabs: {
    backgroundColor: "#00ff00",
  },
});

<Tabs>
  <Tab
    classes={{
      rootInheritSelected: classes.colorfulTabs,
      rootPrimarySelected: classes.colorfulTabs,
      rootSecondarySelected: classes.colorfulTabs
    }}
    label="Item One"
  />
  <Tab
    classes={{
      rootInheritSelected: classes.colorfulTabs,
      rootPrimarySelected: classes.colorfulTabs,
      rootSecondarySelected: classes.colorfulTabs
    }}
    label="Item Two" />
  <Tab 
    classes={{
      rootInheritSelected: classes.colorfulTabs,
      rootPrimarySelected: classes.colorfulTabs,
      rootSecondarySelected: classes.colorfulTabs
    }}
  label="Item Three" />
</Tabs>

rootInheritSelected类将应用于Tabs，其中未设置textColor道具（即文本颜色从父项继承）。 rootPrimarySelected课程适用于Tabs textColor为primary，rootSecondarySelected为secondary。

覆盖material-ui中选定Tab的背景颜色（版本1.0.0-beta.29）

1 个答案: