Стилизованные компоненты могут быть очень полезным инструментом при добавлении CSS в ваши проекты React. Это позволяет вам решать стили каждого компонента по отдельности, что может (если вы так же озадачены CSS, как и я) облегчить головную боль при работе с CSS в целом. Если вы (как и я) беспокоитесь о часто непредсказуемых и каскадных (каламбур) проблемах, которые следуют за изменением свойства отображения в контейнере div, Styled Components здесь, чтобы спасти день, поскольку он сужает ваш фокус, чтобы изменения были чувствуется только в рамках компонента, над которым вы работаете. Хотя этот узкий и сфокусированный подход полезен, часто есть некоторые изменения, которые вы хотите применить ко всему приложению. Одним из таких изменений, с которым я часто сталкиваюсь, является предоставление моим приложениям единого шрифта. Давайте начнем с выбора шрифта:

Источником, который я чаще всего использую для различных шрифтов, так как он позволяет мне просматривать несколько текстовых диапазонов одновременно, является Google Fonts. После того, как вы выбрали шрифт, подходящий для нужд вашего проекта, нажмите + Выбрать этот стиль. Это добавит его на вкладку семьи, которая должна отображаться автоматически при выборе. Обратите внимание, что после выбора шрифта могут быть дополнительные стили на выбор, вы можете добавить их столько, сколько хотите. Вы можете получить к ним доступ в CSS, используя свойство font-weight, выбранное значение зависит от чисел, помеченных для каждого стиля (например, 100, 200 и т. д.).

После того, как вы выбрали все шрифты, необходимые для вашего проекта, пришло время перенести их в ваш проект. Для этого необходимо скопировать встроенный текст (убедитесь, что выделен пункт «ссылка») и поместить его в раздел «head» файла index.html, как в обычном приложении JavaScript. Если вы использовали команду npx-create-react-app для создания своего приложения, вы найдете файл index.html в общей папке. В приведенном ниже примере вы можете видеть, что я разместил свой прямо над заголовком веб-страницы.

Теперь, когда мы перенесли их в наше приложение, как нам ссылаться на них с помощью стилизованных компонентов? Для этого нам нужно будет перейти к нашему компоненту приложения, который находится в верхней части нашего дерева компонентов. Оказавшись там, мы собираемся импортировать createGlobalStyle из Styled Components.

Теперь мы можем создать стиль, который будет применяться ко всему нашему приложению. Создайте переменную, равную createGlobalStyle (обратите внимание, что вы можете называть эту переменную как хотите). Внутри обратных тиков вы можете создать стиль, который будет применяться ко всему вашему приложению.

Так как же нам применить наш шрифт? Нам просто нужно вернуться к Google Fonts и взять встроенный текст под строкой «Правила CSS для указания семейств».

Теперь мы просто вставляем это в любые свойства шрифта, которые хотим изменить. В моем случае я применяю его ко всему телу моего приложения.

Мы почти закончили, последний шаг — добавить компонент createGlobalStyle в функцию приложения.

И вуаля! Ваш стиль теперь применяется глобально! Оживите этого ребенка и сделайте так, чтобы он выглядел красиво.