Question

此处的代码沙箱：

相关位：

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>

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

问题是-它们具有相同的特异性水平，并且标签在选择后出现，因此将其覆盖。

如何在不使用！important的情况下使所选内容更加具体/实现我想要的内容。

Answer 1

我认为最简单的方法是使用a1.pdf a2.pdf a3.pdf b1.pdf b2.pdf b3.pdf c1.pdf c2.pdf c3.pdf类而不是root（对于Tab component）。

演示：https://codesandbox.io/s/q3pmn9o7m4
（我添加了颜色以使更改更容易看到。）

label

另一种方式：https://codesandbox.io/s/8op0kwxpj

<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",
    }
});

Material-UI选项卡“选定”还不够具体。

1 个答案: