#reactjs #fonts #material-ui
Вопрос:
Поэтому я использую MUI v5 и также использую переменные шрифты.
В настоящее время моя реализация темы, на мой взгляд, довольно уродлива.
typography: { fontFamily: systemFonts.join(","), fontWeightExtraBold: 800, h1: { fontSize: "clamp(2.625rem, 1.2857rem 3.5714vw, 4rem)", fontWeight: 800, lineHeight: 78 / 70, "@supports (font-variation-settings: normal)": { fontFamily: variableSystemFonts.join(","), fontVariationSettings: "'wght' 800" } }, h2: { fontSize: "clamp(1.5rem, 0.9643rem 1.4286vw, 2.25rem)", fontWeight: 800, lineHeight: 44 / 36, "@supports (font-variation-settings: normal)": { fontFamily: variableSystemFonts.join(","), fontVariationSettings: "'wght' 800" } }, h3: { fontSize: defaultTheme.typography.pxToRem(36), lineHeight: 44 / 36, letterSpacing: 0, "@supports (font-variation-settings: normal)": { fontFamily: variableSystemFonts.join(",") } }, // ... } В принципе, я должен уточнить
"@supports (font-variation-settings: normal)": { fontFamily: variableSystemFonts.join(",") } Для каждого отдельного варианта типографии.
Мне интересно, есть ли более элегантный и чистый способ достичь того, что я пытаюсь сделать?
Ответ №1:
Может быть, вы можете включить его в заводскую функцию (еще не протестированную):
const normalVariation = (extraProperties) =gt; ({ "@supports (font-variation-settings: normal)": { fontFamily: variableSystemFonts.join(","), ...extraProperties, } }) typography: { fontFamily: systemFonts.join(","), fontWeightExtraBold: 800, h1: { fontSize: "clamp(2.625rem, 1.2857rem 3.5714vw, 4rem)", fontWeight: 800, lineHeight: 78 / 70, ...normalVariation({ fontVariationSettings: "'wght' 800", }) }, h2: { fontSize: "clamp(1.5rem, 0.9643rem 1.4286vw, 2.25rem)", fontWeight: 800, lineHeight: 44 / 36, ...normalVariation({ fontVariationSettings: "'wght' 800", }) }, h3: { fontSize: defaultTheme.typography.pxToRem(36), lineHeight: 44 / 36, letterSpacing: 0, ...normalVariation(), }, // ... }