Материал-вкладки пользовательского интерфейса "выбран" недостаточно специфичны.

Кодовая песочница здесь:

Https://codesandbox.io/s/ypx4qpjvpx

Соответствующие биты: 

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 2
material-ui

1 ответ:

Я думаю, что самый простой способ-использовать класс root вместо label (для Tab компонент ).

Демо: 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: {},
});
1