代码之家 › 专栏 › 技术社区 › dwjohnston

“选定”的材质UI选项卡不够具体。

jss material-ui

2

dwjohnston · 技术社区 · 7 年前

代码沙盒:

相关位:

const styles = theme => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper
  },

  label: {
    fontWeight: "normal"
  },

  selected: {
    fontWeight: "bold"
  }
});



  <Tabs value={value} onChange={this.handleChange}>
    <Tab
      label="Item One"
      classes={{
        label: classes.label,
        selected: classes.selected
      }}
    />
    <Tab
      label="Item Two"
      classes={{
        label: classes.label,
        selected: classes.selected
      }}
    />
    <Tab
      label="Item Three"
      href="#basic-tabs"
      classes={{
        label: classes.label,
        selected: classes.selected
      }}
    />
  </Tabs>

我在这里要做的是我需要覆盖默认的字体粗细样式,但是在选中时,我希望它是粗体的。

问题是,它们具有相同的特异性,并且标签在选中后出现,因此它会覆盖它。

我如何使所选内容更具体/实现我想要的而不使用!很重要。

1 回复 | 直到 7 年前

1

thirtydot 7 年前

我认为最简单的方法是使用 root 类而不是 label (对于 Tab component ).

演示: https://codesandbox.io/s/q3pmn9o7m4
(我添加了颜色,使变化更容易看到。)

<Tab
    label="Item One"
    classes={{
        root: classes.tabRoot,
        selected: classes.selected,
    }}
/>

const styles = theme => ({
    root: {
        flexGrow: 1,
        backgroundColor: theme.palette.background.paper,
    },

    tabRoot: {
        fontWeight: "normal",
        color: "#fff",
    },

    selected: {
        fontWeight: "bold",
        color: "#0ff",
    }
});

https://codesandbox.io/s/8op0kwxpj

const styles = theme => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper,
  },

  tabRoot: {
    fontWeight: "normal",
    color: "#fff",
    '&$selected': {
      fontWeight: "bold",
      color: "#0ff",
    },
  },

  selected: {},
});