Как объявить шрифты с использованием стилизованных компонентов MUI? ⇐ CSS

[Гость]

У меня есть реализация через «ванильные» стилизованные компоненты: Вот код:

import { createGlobalStyle } из 'styled-comments'; экспортировать const GlobalFonts = createGlobalStyle` @font-face { семейство шрифтов: 'Интер'; src: url('app/fonts/Inter-Regular.ttf') format('truetype'); вес шрифта: 400; стиль шрифта: нормальный; } @font-face { семейство шрифтов: 'Интер'; src: URL('app/fonts/Inter-Medium.ttf') format('truetype'); вес шрифта: 500; стиль шрифта: нормальный; } @font-face { семейство шрифтов: 'Интер'; src: url('app/fonts/Inter-SemiBold.ttf') format('truetype'); вес шрифта: 600; стиль шрифта: нормальный; } @font-face { семейство шрифтов: 'Интер'; src: URL('app/fonts/Inter-Bold.ttf') format('truetype'); вес шрифта: 700; стиль шрифта: нормальный; } @font-face { семейство шрифтов: 'Архиво'; src: url('app/fonts/Archivo-SemiBold.ttf') format('truetype'); вес шрифта: 600; стиль шрифта: нормальный; } `; Но мне неприменимо использовать компоненты в ванильном стиле, мне нужно использовать Material-UI: выглядит примерно так: https://mui.com/material-ui/api/global-styles/

Но я не знаю, как его правильно определить, потому что каждое свойство объекта стиля должно быть уникальным, а вот свойства «5 шрифтов».

Я был бы признателен, если бы кто-нибудь увидел хорошее решение этой проблемы. Спасибо!