Новый React с Material-UI Typography и компонентом Button веса шрифта отображаются неправильно

Question

У меня есть этот код в моих предыдущих и моих последних приложениях React:

<Typography
  variant="h6"
  color="inherit"
  noWrap
>
  h6. Heading
</Typography>

<Button
  type="button"
  size="large"
  color="primary"
>
  Primary button
</Button>

Их ярлыки имеют font-weight: 500 как в моих предыдущих, так и в последних приложениях.Проблема заключается в том, что в моем предыдущем приложении и демонстрационных материалах Material-UI эти метки имеют «жирный вид» , в то время как в моем недавно созданном приложении React они просто имеют «нормальный внешний вид шрифта» и должныиметь font-weight: 550 чтобы иметь «жирный текст» .

У моего последнего приложения React есть эти зависимости с npm версией 6.8.0:

"@material-ui/core": "^3.9.2",
"react": "^16.8.2",

Есть причина, почему это происходит?Поверьте мне, я уже пытался вывести только компоненты Typography и Button без какого-либо родителя, и кажется, что они все еще появляются с нормальным весом шрифта.

Answer 1

Вы пытаетесь использовать h6, который еще не был выпущен в стабильной ветви Material UI (будет в версии 4.0.0).

Вариант 1

Вы можете добавить useNextVariants: true к своей теме многоязыкового интерфейса пользователя, чтобы использовать h6 (и всю другую типографику в 4.0.0) между тем:

const theme = createMuiTheme({
  typography: {
    useNextVariants: true,
  },
});

---

Вариант 2

Вы также можете использовать variant="title" вместо variant="h6", если вы хотите быстро исправить это сейчас, но помните, что вы будетенеобходимо изменить это при обновлении до 4.0.0 в любом случае.Для быстрого исправления ваш код будет выглядеть следующим образом:

<Typography
  variant="title"
  color="inherit"
  noWrap
>
  h6. Heading
</Typography>

---

Что касается того, почему это работало в ваших старых приложениях, трудно сказать, не видя код, но вы, вероятно, использовали «следующий».", а не" стабильная "ветвь Material UI.