Полное руководство по встроенному стилю в приложении React 

React - популярная библиотека JavaScript для создания пользовательских интерфейсов. Его используют Facebook, Instagram, Skype и Netflix, и это лишь некоторые из них. Она был создана инженерами Facebook с целью декларативного характера. Это означает, что React не придерживается мнения о том, как вы должны структурировать свой код или писать свои компоненты.

Это просто то, что написано на банке: вы пишете компоненты React на JavaScript, которые затем отображаются в DOM с помощью встроенного API браузера, называемого «виртуальный DOM».

По мере того, как все больше и больше фреймворков JavaScript переходят на React, синтаксис встроенного стиля также становится популярным. Встроенные стили позволяют легко создавать простые стили, подобные CSS, для компонентов без использования отдельной таблицы стилей. Это позволяет разработчикам и дизайнерам, работающим в команде, более легко обмениваться стилями и обновлять их.

Встроенные стили - это способ добавления свойств стиля к элементу HTML путем записи их рядом с тегом. Встроенные стили позволяют добавлять правила CSS в компоненты JavaScript, что упрощает и упрощает реализацию изменений стиля. Эта статья покажет вам, как работают встроенные стили и когда вы должны использовать их в своем приложении React.

Каскадные таблицы стилей, широко известные как CSS, являются основным строительным блоком веб-разработки. С помощью CSS мы можем определить представление документа, набор правил, управляющих форматированием элемента на веб-странице. Используя методы CSS, мы можем сделать веб-страницы более привлекательными и эффективными.

Есть много разных способов стилизации компонентов в React, некоторые из них упомянуты ниже:

1. Встроенный CSS
2. CSS в JS
3. Стилизованные компоненты
4. Модуль CSS и т. д.

Здесь мы собираемся обсудить встроенный CSS или встроенный стиль. Это первый вариант укладки, который вы изучите.

Встроенный стиль в приложении React

Встроенный стиль не является новой концепцией. Однако отсутствие поддержки этого в браузерах затруднило использование встроенного стиля. Теперь, когда все различные поставщики браузеров начинают добавлять поддержку CSS-сетки и макетов Flexbox, мы начинаем видеть, как встроенный стиль вступает в свои права.

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

Встроенный стиль - это способ добавления информации о стиле в документ HTML с помощью атрибута стиля. Атрибут стиля может быть добавлен к любому элементу HTML и будет отображать стили из встроенной таблицы стилей в заголовке документа, прежде чем что-либо еще в документе.

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

Встроенный CSS позволяет применять уникальный стиль к одному элементу HTML за раз. Вы назначаете CSS конкретному элементу HTML с помощью атрибута style с любыми свойствами CSS, определенными в нем.

Атрибут style определяет встроенный стиль для элемента и переопределяет любой набор стилей в глобальном масштабе, так как он имеет наивысшую специфичность.

Простые элементы HTML

В простых элементах HTML строковое значение присваивается атрибуту style. Эта строка содержит ряд пар свойств и значений CSS. Каждая пара свойств: значение разделяется точкой с запятой (;)

<h1 style=”color:red; font-size:30px;”> This is a heading </h1>

React HTML элементы

В элементах React HTML атрибут style принимает объект JavaScript со свойствами camelCased, а не строку CSS.

function HelloWorld() {
 
  return(
    <p style={{
      fontSize: 14,
      color: “#4a54f1”,
      textAlign: “center”,
      paddingTop: “100px”,
  }}>     Hello World!!!   </p>
)}

ПРИМЕЧАНИЕ: React автоматически добавит суффикс “px” к определенным числовым свойствам встроенного стиля. Если вы хотите использовать единицы измерения, отличные от “px”, укажите значение в виде строки с требуемой единицей измерения. Но есть исключения, некоторые свойства CSS являются безразмерными.

Мы можем создать переменную объекта style так же, как мы создаем объект JavaScript. Затем этот объект передается в атрибут стиля элемента, который мы хотим стилизовать.

Поэтому вместо того, чтобы добавлять стили напрямую, как мы это делали в предыдущем примере, мы могли бы просто передать переменные объекта.

function HelloWorld() {
    const styleObj = {
      fontSize: 14,
      color: “#4a54f1”,
      textAlign: “center”,
      paddingTop: “100px”,
    }  
  return(
    <p style={styleObj}>     Hello World!!!   </p>
)}

Плюсы:

1. Это самый быстрый способ стилизовать элемент.
2. Это позволяет применять правила стиля к определенным элементам HTML.
3. У них самый высокий приоритет. Поэтому, если вы не можете изменить внешний файл стиля, используйте его, чтобы переопределить их все.
4. Нет необходимости в дополнительном файле, который нужно создавать для стилизации.
5. Мы можем передавать динамические значения в объект стиля элемента.

Минусы:

1. Необходимо написать избыточные свойства CSS индивидуально для каждого элемента.
2. Свойства CSS будут ограничены только областью компонента, поэтому повторное использование невозможно.
3. Невозможно стилизовать псевдоэлементы, псевдоклассы, медиа-запросы и т. д. с помощью встроенных стилей.
4. Сложно поддерживать или редактировать / обновлять, а большое количество встроенного CSS может снизить удобочитаемость кода.
5. Снижает производительность, при каждом повторном рендеринге объект стиля будет пересчитываться.
6. Встроенные стили имеют приоритет над объявлениями стилей на уровне страницы и внешними таблицами стилей. Таким образом, вы можете случайно переопределить стили, которые вы не планировали.

Заключение

Итак, у вас есть все основные подходы к стилизации компонента React. В общем, все способы полезны, и вы можете использовать любой метод, который вам нравится, в зависимости от размера проекта